Q:

fixed bottom bar with css gradient background

I am trying to put a bottom bar to the bottom of the screen. I have piece of CSS code which creates the bar for me. But I haven't be able to fix the bar to the bottom.
CSS
.top_bar
{
    display:block;
    height:18px;
    margin-bottom:10px;
    margin-top:10px;

    background-image: linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
    background-image: -o-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
    background-image: -moz-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
    background-image: -webkit-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);
    background-image: -ms-linear-gradient(left bottom, rgb(135,30,51) 15%, rgb(90,115,183) 58%, rgb(90,116,183) 79%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        right 0,
        color-stop(0.15, rgb(135,30,51)),
        color-stop(0.58, rgb(90,115,183)),
        color-stop(0.79, rgb(90,116,183))
    );
}

How can I fix this to the bottom?
I have tried this code below but I didn't work. It fixes the bar to the bottom but gradient bar shrinks...
position: fixed;
bottom: 30px;

A:

Just add these 3 to your rule, fixed positioning needs the element's width to be mentioned, because it is just a specialized form of absolute positioning:
position: fixed;
width: 100%;
bottom: 30px;

Fiddle

A:

If the element is positioned using absolute or fixed, the element's width won't automatically grow to 100% the way it does otherwise. If you want the width to be 100%, you need to set that manually.
Code:
.top_bar {
    position: fixed;
    bottom: 30px;
    display:block;
    height:18px;
    width: 100%; //Manually set width to 100%
    margin-bottom:10px;
    margin-top:10px;

    //Gradient stuff
}

Example: http://codepen.io/skimberk1/pen/4eca8e6d6f9b899458cfa4ccfea38877

