CSS - Fensterhöhe

Question

Ich habe ein #container-Element, das ich einen Hintergrund Problem mit haben:

html {
    font-family: Arial, sans-serif;
    height:100%;  
}

body{
    margin: 0 auto;
    padding: 0; 
    font-size: 12px;
    height:100%;
    background:url(/_images/body-bg.jpg) top center no-repeat;
    /*background:#0068b3;
    background: -webkit-gradient(linear, left top, left bottom, from(#bfd9ed), to(#0068b3));
    background: -moz-linear-gradient(top,  #bfd9ed,  #0068b3);
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfd9ed', endColorstr='#0068b3')*/

}

#container {
    width:995px;
    margin: 0 auto;
    padding: 0;
    height:100%;
    position:relative;

}

Wenn ich ein Hintergrundbild zu #container hinzufüge und die Seite einen Inhalt hat, der Scrollen erfordert, zeigt das Hintergrundbild nur den Betrag der Fensterhöhe an, und wenn Sie scrollen, wird das Hintergrundbild nicht angezeigt...

Warum sollte das so sein?

Answer 1

Um das Bild nicht mit dem div scrollen, muss ich es als fest eingestellt:

#container {
    background:url('img.png') top left no-repeat;
    background-attachment:fixed; //this will avoid scroll
}

Um das Bild auf die Größe des Divs zu strecken, können Sie background-size: 100%; Dies ist jedoch eine css3-Eigenschaft, die in älteren Browsern (IE8-) nicht funktioniert.

Wenn der Container eine feste Breite hat, erstellen Sie einfach ein Bild mit derselben Breite. Andernfalls müssen Sie eine Javascript-Lösung implementieren, um die Größe entsprechend zu ändern.

Answer 2

Sie haben no-repeat über die background CSS-Eigenschaft von body .

Wechseln zu repeat o repeat-y nur vertikal zu wiederholen.