Hintergrundgröße: Abdeckung; Eigenschaft

Question

Immer wenn das Hintergrundbild sich ändert, brauche ich es, um den Körper zu bedecken. Ich benutze background-size: cover, aber es scheint nicht zu funktionieren.

body { 
    position: relative; 
    margin-top: 60px; 
    background-color: #000; 
    font-family: 'Roboto Slab', serif; 
    background: url(https://i.ytimg.com/vi/lECC6eQhnZo/maxresdefault.jpg); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-atachment: fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    transition: background 1s; 

und hier ist die jQuery, dass das Bild verändert:

$("body").css("background", objects[newNum].img); 

die Bilder in einem Array (Objekte) gespeichert sind.

CodePen: http://codepen.io/Chantun/pen/WxXaGy?editors=0010

Answer 1

Sie benötigen Nutzungen Hintergrund Hintergrund-Bild zu ändern. Weil es im Konflikt mit der Hintergrundgröße steht.

Also für Ihre CSS wäre es:

body { 
    position: relative; 
    margin-top: 60px; 
    background-color: #000; 
    font-family: 'Roboto Slab', serif; 
    background-image: url(https://i.ytimg.com/vi/lECC6eQhnZo/maxresdefault.jpg); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-atachment: fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    transition: background 1s; 

Und für Ihre JS sollte es sein:

$("body").css("background-image", objects[newNum].img); 

Answer 2

Hintergrund Abdeckung ist richtig Arbeit. auf Standardkörperhöhe: auto. Verwenden Sie min-Höhe: 100vh für Körper. und ändere margin-top zu padding-top.

body { 
    min-height: 100vh; 
    padding-top: 60px; 
} 

Codepen

Answer 3

Nur up Köpfe!

background-attachment: fixed und background-size: cover nicht gut miteinander spielen! :(

Weitere detaillierte Erklärung darüber, wie und warum sie hier kollidieren: https://stackoverflow.com/a/23811091

bearbeiten: Ihre background-attachment: fixed falsch geschrieben :)

Answer 4

Ändern background-attachment auf Ihrem codepen zwei T-Shirts zu haben, statt einer macht es funktioniert, wie ich denke, dass du es willst. Sie können auch Ihre Hintergrundregeln in Kurzschrift wie:

background: #000 url(https://i.ytimg.com/vi/lECC6eQhnZo/maxresdefault.jpg) center center/cover no-repeat; 
background-attachment: fixed;