13

In my page have 2-3 sections that have 100% width and background. When I open it on full screen everything is ok but when the screen is smaller than 960px (width of content in this sections) background image is not the entire page. The right side whis is hidden in firtst moment haven't background - it's white. You can see what I mean here: http://micobg.net/10th/

micobg
  • 1,272
  • 6
  • 21
  • 35
  • 1
    read this : http://www.whatstyle.net/articles/48/css_tricks_1_100_percent_width_in_a_variable_width_container – xkeshav Aug 23 '12 at 06:27
  • 1
    You can find useful information in [stackoverflow.com/questions/2083831/css-background-image-does-not-fill-when-scrolling](http://stackoverflow.com/questions/2083831/css-background-image-does-not-fill-when-scrolling) – utsikko Aug 23 '12 at 07:16

3 Answers3

24

Simply add the background-size:100% style to the element where you applied background-image. Works in Firefox, Safari, and Opera. For example:

<style>
.divWithBgImage {
  width: 100%;
  height: 600px;
  background-image: url(image.jpg);
  background-repeat: no-repeat;
  background-size: 100%; //propotional resize
/*
  background-size: 100% 100%; //stretch resize
*/
}
</style>
<div class="divWithBgImage">
  some contents
</div>
Jay
  • 4,627
  • 1
  • 21
  • 30
5

Regarding to this article, you should to use cover as well:

html { 
  background: url(PATH_TO_IMAGE) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
Mazdak Shojaie
  • 1,620
  • 1
  • 25
  • 32
2

Use background min-width:960px; instead of width:100%; Cheers

Simon Dragsbæk
  • 2,367
  • 3
  • 30
  • 53