CSS: rozciąganie obrazu tła do 100% szerokości i wysokości ekranu?

Question

Mam obraz o nazwie myImage.jpg. To jest mój CSS:

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

Z jakiegoś powodu, kiedy to zrobić, szerokość myImage rozciąga się na całym ekranie, ale wysokość rozciąga się tylko do wysokości wszystkiego na stronie. Jeśli więc umieściłem na mojej stronie html pęczek ... Jeśli moja strona HTML składa się tylko z

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

wówczas wysokość obrazu tła będzie tylko wysokość jednej

<br> 

Jak zrobić wysokości mojego obrazu tła wykonania 100% ekran, którego używa użytkownik do przeglądania strony internetowej?

Answer 1

Musisz ustawić wysokość html do 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%; 
} 

Załatwi sprawę.

Domyślnie nawet html i body są tylko tak duże, jak ich zawartość, ale nigdy nie przekraczają szerokości/wysokości okien. Może to często prowadzić do dość dziwnych wyników.

kupili także czytać http://css-tricks.com/perfect-full-page-background-image/

Istnieje wiele sposobów, osiągają bardzo dobre i skalowalne tła pełny obraz.

Answer 3

Polecam background-size: cover; jeśli nie chcesz, aby tło, aby stracić swoje proporcjach: 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; 
} 

Źródło: http://css-tricks.com/perfect-full-page-background-image/