CSS: Stretching Hintergrundbild auf 100% Breite und Höhe des Bildschirms?

Question

Ich habe ein Bild namens myImage.jpg. Das ist mein CSS:

body { 
    background-image:url("../images/myImage.jpg"); 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
} 

Aus irgendeinem Grund, wenn ich dies tun, ist die Breite der myImage erstreckt sich über den gesamten Bildschirm, sondern die Höhe erstreckt sich nur bis zur Höhe von alles andere auf der Seite. Also wenn ich einen Haufen

in meine HTML-Seite, dann wird die Höhe erhöhen. Wenn meine HTML-Seite nur ein

besteht

<div id='header'> 
    <br> 
</div> 

dann die Höhe des Hintergrundbildes wäre nur die Höhe eines

<br> 

Wie kann ich die Höhe meines Hintergrundbildes 100% des Fabrikats Bildschirm, mit dem der Benutzer die Webseite anzeigt?

Answer 1

Sie müssen die Höhe des html zu 100%

body { 
    background-image:url("../images/myImage.jpg"); 
    background-repeat: no-repeat; 
    background-size: 100% 100%; 
} 
html { 
    height: 100% 
} 

http://jsfiddle.net/8XUjP/

Answer 2

html, body { 
    min-height: 100%; 
} 

Wird den Trick tun.

Standardmäßig sind sogar html und body nur so groß wie der Inhalt, den sie enthalten, aber nie mehr als die Breite/Höhe der Fenster. Dies kann oft zu merkwürdigen Ergebnissen führen.

Sie könnten auch http://css-tricks.com/perfect-full-page-background-image/

Es gibt einige gute Möglichkeiten, erreiche ein sehr gutes und skalierbare voller Hintergrundbild zu lesen.

Answer 3

ich background-size: cover; würde empfehlen, setzen, wenn Sie nicht über Ihren Hintergrund wollen seine Proportionen verlieren: JS Fiddle

html { 
    background: url(image/path) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

Quelle: http://css-tricks.com/perfect-full-page-background-image/