Na mojej stronie znajdują się 2-3 sekcje, które mają 100% szerokości i tło. Kiedy otwieram go na pełnym ekranie, wszystko jest w porządku, ale gdy ekran jest mniejszy niż 960px (szerokość treści w tej sekcji), obraz tła nie jest całą stroną. Prawa strona, która jest ukryta w pierwszej chwili, nie ma tła - jest biała. Możesz zobaczyć, co mam na myśli: http://micobg.net/10th/CSS: 100% szerokości i tła?
Użyj tła min-szerokość: 960px; zamiast szerokości: 100%; Pozdrowienia
Po prostu dodaj styl background-size:100% do elementu, w którym został zastosowany background-image. Działa w przeglądarkach Firefox, Safari i Opera. Na przykład:
<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>
Teraz działa również w Chrome – Channel
odniesieniu do this artykułu, należy użyć cover także:
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;
}
przeczytać: http://www.whatstyle.net/articles/48/css_tricks_1_100_percent_width_in_a_variable_width_container – diEcho
Można znajdź przydatne informacje w [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