Question

I got this problem trying to get the header-bg div to always be the full browser width.

I have a background image with some clouds and when I use ctrl+scroll the image stays the original width and stays left aligned. At original page view the bg is perfect 100% width, but I want it to be perfect with al screen widths. Is this even possible or am I wrong?

Heres the code:

body, html {
    height:100%;
    width:100%;
    margin:0;
    padding:0;} 


#header-bg {
    background-image:url(images/header/header-bg.jpg);
    background-repeat:no-repeat;
    min-width:100%;
    width:100%;
    margin:0;
    position:fixed;
    height:402px;}

<div id="header-bg">
<div id="header">
<div id="navigation">
</div>
</div>
</div>

Thanks for looking!

Answer 1

By default, the background image cannot resize. The background-size property has to be used to get your background to fill the whole DIV:

#header-bg {
     background-image: url(images/header/header-bg.jpg);  

    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    /*Other CSS*/
}

This CSS feature is supported by:

• Firefox 3.6+
• Opera 9.5+
• Chrome 1+
• Safari 3+
• Internet Explorer 9+

If you cannot use this property, your only remaining option is using a <img> element.
Fiddle: http://jsfiddle.net/Hf79s/

<style>
#header-bg{
    width:100%;
    height: 50px;
}
#header-bg-img {
    height: 100%;
    width: 100%;
}
</style>
<div id="header-bg">
    <img src="images/header/header-bg.jpg" id="header-bg-img" />
</div>