CODEWITHSUNDEEP
htmlcss
Arif YILMAZ
Arif YILMAZ

Reputation: 5866

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;

Upvotes: 2

Views: 3309

Answers (3)

PSL
PSL

Reputation: 123739

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

Upvotes: 3

skimberk1
skimberk1

Reputation: 2094

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

Upvotes: 3

Patrick Lorio
Patrick Lorio

Reputation: 5668

http://jsfiddle.net/Y7UKv/1/

When the position type is changed it no longer has a width of 100%. You'll need to add

left: 0;
right: 0;

or

width:100%;

Upvotes: 2

Related Questions