CSS: Pełny rozmiar obrazu tła

Question

Próbując uzyskać pełny tło rozmiar obrazu z:

html { 
    height: 100%; 
    background:url('../img/bg.jpg') no-repeat center center fixed; 
    background-size: cover; 
} 

To pokazuje obraz tła z odpowiednią szerokość, ale wysokość zostanie rozciągnięta. Próbowałem różnych opcji jak

html { 
background:url('../img/bg.jpg') no-repeat center center fixed; 
background-size: 100% auto; 
-webkit-background-size: 100% auto; 
-moz-background-size: 100% auto; 
-o-background-size: 100% auto; 

}

usuwania height: 100%

ale żaden z nich nie pracował.

Answer 1

Ekran jest oczywiście różny kształt do obrazu. Nie jest to rzadkością i zawsze należy uwzględniać ten przypadek, nawet jeśli ekran ma ten sam kształt (proporcje), ponieważ ekrany innych osób nie zawsze będą. Aby sobie z tym poradzić, masz tylko jedną z trzech opcji:

• Możesz całkowicie zasłonić ekran swoim obrazem, ale nie zniekształcić obrazu. W takim przypadku będziesz musiał poradzić sobie z faktem, że krawędzie twojego zdjęcia zostaną obcięte. W tym przypadku użyj: background-size: cover
• Możesz wybrać, aby upewnić się, że cały obraz jest widoczny i nie jest zniekształcony. W takim przypadku musisz poradzić sobie z faktem, że część tła nie będzie pokryta twoim obrazem. Najlepszym sposobem, aby sobie z tym poradzić, jest nadanie stronie solidnego tła i zaprojektowanie obrazu tak, aby zanikał w bryle (chociaż nie zawsze jest to możliwe). W tym przypadku użyj: background-size: contain
• Możesz wybrać, aby pokryć cały ekran swoim tłem i zniekształcić go w celu dopasowania. W tym przypadku użyj: background-size: 100% 100%

Answer 2

spróbuj zawierać zamiast pokrywy, a następnie wyśrodkować go:

background-size: contain; 
background-position: center; 

Answer 3

Lepszym rozwiązaniem może być użycie lekkiej wtyczki jQuery do dynamicznego dopasowania tła do strony przeglądarki. Jednym, który bardzo mi się podoba, jest backstretch.js. Są niewiarygodnie proste do wdrożenia.

Answer 4

Powinieneś używać ciała jako selektora, a nie html, spowoduje to problemy z twoim znacznikiem. Kod jest poniżej:

html { 
    height: 100%; 
    background:url('../img/bg.jpg') no-repeat center center fixed; 
    background-size: cover; 
} 

chciałbym spróbować coś takiego:

body { 
    background:url('../img/bg.jpg') no-repeat 50% 0 fixed; 
    margin: 0 auto; 
} 

Nie powinno się określić wymiary obrazu.

Answer 5

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; 

Answer 6

Mam ten sam problem Używam tego CSS na body

background: url(image.jpg); 
    background-color: rgba(0, 0, 0, 0); 
    background-position-x: 0%; 
    background-position-y: 0%; 
    background-size: auto auto; 
background-color: #0a769d; 
height: 100%; 
min-height: 100%; 
max-height: 100%; 
width: 100%; 
background-size: 100% 100%; 
background-position: center; 
max-width: 100%; 
min-width: 100%; 
top: 0; 
left: 0; 
padding: 0; 
margin: 0;