force to occupy div if image is bigger than div

Question

I have a footer menu, which background is an image.

I want to show all image (the bacground image is bigger 2000x168 than div). I set width 100% but it seems is not showing the whole image, it is showing only the size of my screen

How can I show complete image and not only the part that I am able to see in my screen?

Here is a fiddle

#bottomnav{
    width:100%;
    height:50px;
   background: no-repeat url(http://eurekavi.com/barraroja.png) /*repeat 0 0*/;
    position:absolute;
    bottom:0px;

}

the image should look like this

possible duplicate of [Stretch and scale a CSS image in the background - with CSS only](http://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only) — isherwood, Apr 02 '13 at 16:10

score 1 · Answer 1 · answered Apr 02 '13 at 16:13

1

Here, try this:

    #bottomnav
    {
    width:100%;
    height:50px;
    background: no-repeat url(http://eurekavi.com/barraroja.png);
    background-size:100% 100%;
    }

Hope it helps!

answered Apr 02 '13 at 16:13

Nithin Omanakuttan · Answer 2 · 2013-04-02T16:52:30.983

You can use the background-size property in CSS3.

#bottomnav{
    width:100%;
    height:50px;
    background:url(http://yoururl.com/image.png) no-repeat;
    background-size:100% auto;
}

This will work, but only on browsers that support CSS3. In this example the height of the image is automatically adjusted according to the resolution ratio. If you want to keep it to a predetermined size, you should try something like this.

background-size:width height;

in this set your width in % or px or you can use 100% for both as mentioned in the above post. It will work. You can also use this argument background-position:center; This will center the image.

score 1 · Accepted Answer · answered Apr 02 '13 at 16:18

Depending on what you want:

#bottomnav{
    width:600px;
    height:50px;
    background:#F00;
    position:absolute;
    bottom:0px;
    background: no-repeat url(http://eurekavi.com/barraroja.png) top center;
    background-size: contain;
}

You can center the background to avoid unbalanced black areas on the left and right.

Reference: http://www.css3.info/preview/background-size/

force to occupy div if image is bigger than div

3 Answers3