Hintergrund-size: nicht für Bild in div Skalierung

Question

ich vier gleich großen divs haben wie diese ein:

<div id="top-left"></div> 
<div id="top-right"></div> 
<div id="bottom-left"></div> 
<div id="bottom-right"></div> 

Jeweils 50% der Breite der Seite und absolut positioniert. Wie dies zum Beispiel:

#top-right { 
position: absolute; 
top: 0px; 
left: 50%; 
width: 50%; 
height: 50%; 
} 

Das Problem ist, wenn ich versuche, ein (großes) Hintergrundbild über die CSS3 Abdeckung zu skalieren. Dies ist das CSS-Hintergrundbild ich bisher haben:

background: #000 url('DSC01992.jpg') center center fixed no-repeat; 
background-size: cover; 
-moz-background-size: cover; 
-o-(etc.) 

Hier ist ein anschauliches Beispiel: http://jsfiddle.net/TqQv7/

Wenn Sie das Platzhalter Bild öffnen hier: http://placekitten.com/2000/1000 Sie werden sehen, dass das Bild nicht korrekt skaliert werden.

Fehle ich etwas?

Answer 1

Das Entfernen der background-position und background-attachment Teile Ihrer Kurzanleitung background Deklaration wird Ihnen Ihre gewünschten Ergebnisse geben.

Wechsel:

background: #000 url('http://placekitten.com/2000/1000') center center fixed no-repeat; 

An:

background: #000 url('http://placekitten.com/2000/1000') no-repeat; 

Hier eine Demo: http://jsfiddle.net/TqQv7/1/

Mit background-position undbackground-attachment zusammen mit background-size : cover ist anti-intuitiv, Sie sagen der Browser, um dort zwei verschiedene Dinge zu tun, und es scheint so Moderne Browser verwenden immer noch die alte Methode und nicht die neue.

Weitere Informationen über Einschränkungen in Bezug auf background-size Check-out die MDN-Dokumentation: https://developer.mozilla.org/en-US/docs/CSS/background-size