CODEWITHSUNDEEP
cssbackgroundwidth
micobg
micobg

Reputation: 1342

CSS: 100% width and background?

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/

Upvotes: 13

Views: 107805

Answers (3)

Mazdak Shojaie
Mazdak Shojaie

Reputation: 1698

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;
}

Upvotes: 5

Simon Dragsbæk
Simon Dragsbæk

Reputation: 2399

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

Upvotes: 2

Jay
Jay

Reputation: 4686

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>

Upvotes: 24

Related Questions