CSS: 100% szerokości i tła?

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?

Źródło

2012-08-23 micobg

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

Użyj tła min-szerokość: 960px; zamiast szerokości: 100%; Pozdrowienia

Źródło

2012-08-23 14:08:59

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>

Źródło

2012-08-24 12:33:17 Jay

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

Źródło

2016-05-17 19:15:04

CSS: 100% szerokości i tła?

Odpowiedz

Powiązane problemy