CSS: allunga l'immagine di sfondo al 100% di larghezza e altezza dello schermo?

Question

Ho un'immagine chiamata myImage.jpg. Questo è il mio CSS:

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

Per qualche ragione, quando faccio questo, la larghezza di myImage allunga attraverso l'intero schermo ma l'altezza si estende solo fino all'altezza di tutto il resto della pagina. Quindi, se metto un po 'di

<br> 

nella mia pagina html, quindi l'altezza aumenterà. Se la mia pagina HTML consiste solo di un

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

quindi l'altezza dell'immagine di sfondo sarebbe solo l'altezza di un

<br> 

Come faccio a fare l'altezza della mia immagine di sfondo al 100% del schermata che l'utente sta utilizzando per visualizzare la pagina Web?

Answer 1

è necessario impostare l'altezza di html per 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%; 
} 

Farà il trucco.

Per impostazione predefinita, anche html e body sono grandi solo quanto il contenuto in essi contenuto, ma mai più della larghezza/altezza delle finestre. Questo può spesso portare a risultati piuttosto strani.

Si potrebbe anche voler leggere http://css-tricks.com/perfect-full-page-background-image/

Ci sono alcuni ottimi modi fanno ottenere un'immagine molto buona e scalabile sfondo pieno.

Answer 3

Suggerirei background-size: cover; se non si desidera che il fondo a perdere le sue proporzioni: 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; 
} 

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