Wie verwende ich 100% CSS Hintergrundbild mit Scrolling Content?

Ich möchte eine Site mit einem Hintergrundbild erstellen, das immer das gesamte Fenster ausfüllt, auch wenn der Inhalt vertikal scrollen kann.Wie verwende ich 100% CSS Hintergrundbild mit Scrolling Content?

Ich habe erstellt this JSFiddle mit Hintergrund-Größe: Abdeckung, um das Hintergrundbild auf das Fenster zu skalieren.

Es funktioniert, solange die Divs innen kleiner als das Fenster sind. Wenn Sie vertikal blättern, füllt das Hintergrundbild die Seite nicht mehr und zeigt stattdessen einen weißen/grauen Bereich.

Meine Frage ist also: Wie kann ich ein 100% Hintergrundbild mit Scroll-Inhalten kombinieren? Das ist mein 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; 
}

Und 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>

Quelle

2013-10-14 Kokodoko

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

Auch habe ich nicht bekam warum Sie position: absolute; auf dem Hüllenelement verwenden, in der Regel sollten Sie verwenden position: relative;

Quelle

2013-10-14 15:43:57

Danke, es funktioniert :) jetzt Warum relativ absolut statt verwenden? – Kokodoko

@PietBinnenbacht Das ist lil detaillierte Positionierung Konzept, lesen Sie einige Artikel und Sie werden meinen Punkt, warum nicht absolut zu verwenden, weil die Sache, die Sie tun, scheint keine Notwendigkeit, absolut zu verwenden :) –

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

Quelle

2013-10-14 15:44:51

Sie fehlen Semikola auf der rechten Seite und unten – kofifus

zu Ihrem CSS hinzufügen:

background-attachment: fixed;

Quelle

2013-10-14 15:46:44 gvee

Wie verwende ich 100% CSS Hintergrundbild mit Scrolling Content?

Antwort

Verwandte Themen