Obraz tła z rozciągniętym CSS

Question

Mam duży obrazek do użycia jako background-image strony. Chcę, aby wysokość obrazu była rozciągnięta, aby wypełnić wysokość strony. Powinien być również wyśrodkowany.

background: black url("/image/background.jpg") no-repeat fixed center; 

Answer 1

background-size: cover rade w nowoczesnych przeglądarek - Mozilla documentation zobaczyć więcej szczegółów.

W starszych przeglądarkach (szczególnie starszych wersjach IE) odniosłem wiele sukcesów z wtyczkami jQuery, takimi jak this one, aby emulować zachowanie.

Answer 2

dodać do css

{ 
background: black url("/image/background.jpg") no-repeat fixed center; 
height: 100%; 
width:100% 
} 

Answer 3

Myślę, że używanie div byłoby najprostszym sposobem uzyskania efektu, którego szukasz.

<div id="background"> 
    <img src="/image/background.jpg" class="stretch" alt="" /> 
</div> 
    <style> 
    #background { 
     background-color:#000000; 
     width: 100%; 
     height: 100%; 
     position: fixed; 
     left: 0px; 
     top: 0px; 
     z-index: -1; 
    } 

    .stretch { 
     width:100%; 
     height:100%; 
    } 
    </style> 

Answer 4

tutaj jest dobrym writeup

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

sedno to istota

body { 
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; 
}