Jak korzystać ze 100% tła CSS z przewijaną treścią?

Chcę utworzyć witrynę z obrazem tła, który zawsze wypełnia całe okno, nawet jeśli zawartość może przewijać się w pionie.Jak korzystać ze 100% tła CSS z przewijaną treścią?

Utworzono this JSFiddle używając background-size: cover, aby skalować obraz tła do okna.

Działa tak długo, jak elementy div są mniejsze niż okno. Jeśli przewijasz w pionie, obraz tła nie wypełnia już strony i zamiast tego wyświetla biały/szary obszar.

Moje pytanie brzmi: jak połączyć obraz w 100% z przewijaniem zawartości? To jest mój CSS:

html { 
    height: 100%; 
    margin:0px; 
    background-color:#999999; 
    background-image: url(http://s22.postimg.org/e03w9stjl/main_bg.png); 
    background-position:center; 
    background-repeat:no-repeat; 
    background-size: cover; 
} 
body { 
    min-height: 100%; 
    margin:0px; 
} 
#appcontainer { 
    position: absolute; 
    background-color: rgba(255, 255, 255, 0.7); 
    width:560px; height:2220px; 
    left:20px; top:20px; 
}

i HTML:

<!DOCTYPE html> 
<html> 
<head></head> 
<body> 

    <div id="appcontainer"> 
     This div causes the background image to stop scaling to the page. 
    </div> 

</body> 
</html>

Źródło

2013-10-14 Kokodoko

Zastosowanie background-attachment: fixed;

Demo

html { 
    height: 100%; 
    margin:0px; 
    background: url(http://www.freegreatpicture.com/files/147/18380-hd-color-background-wallpaper.jpg) no-repeat center center; 
    background-size: cover; 
    background-attachment: fixed; 
}

Także, ja nie mam dlaczego używasz position: absolute; na elemencie owijarki, generalnie należy używać position: relative;

Źródło

2013-10-14 15:43:57

Dzięki, że to działa teraz :) Dlaczego używać względne zamiast bezwzględne? – Kokodoko

@PietBinnenbocht To jest szczegółowa koncepcja pozycjonowania lilów, przeczytaj niektóre artykuły, a zrozumiesz, dlaczego nie używać absolutu, ponieważ rzecz, którą robisz, nie wydaje się być potrzebna absolutnie :) –

#appcontainer { 
     position: absolute; 
     background-color: rgba(255, 255, 255, 0.7); 
     background: url(images/bg.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
     top: 0; 
     right 0; 
     left: 0; 
     bottom 0; 
    }

Źródło

2013-10-14 15:44:51

brakuje Ci średników po prawej i na dole – kofifus

Dodaj do swojego CSS:

background-attachment: fixed;

Źródło

2013-10-14 15:46:44 gvee

Jak korzystać ze 100% tła CSS z przewijaną treścią?

Odpowiedz

Powiązane problemy