Background-size: nie obejmować skalowanie obrazu w div

Question

Mam cztery równo wielkości div stworzyły tak:

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

każdy jest 50% szerokości strony i umieszczone całkowicie. Na przykład:

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

Problem polega na tym, że próbuję przeskalować (duży) obraz w tle za pomocą pokrywy CSS3. To css tła mam tak daleko:

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

Oto żywy przykład: http://jsfiddle.net/TqQv7/

Jeśli otworzysz obraz zastępczy tutaj: http://placekitten.com/2000/1000 widać, że obraz nie jest skalowany prawidłowo.

Czy brakuje mi czegoś?

Answer 1

Usunięcie części z Twojej krótkiej deklaracji background spowoduje uzyskanie pożądanych rezultatów.

Zmiana:

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

Do:

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

Oto demo: http://jsfiddle.net/TqQv7/1/

Korzystanie background-position ibackground-attachment wraz z background-size : cover jest anty-intuicyjne, mówisz przeglądarka robi dwie różne rzeczy i wydaje się, że nowoczesne przeglądarki wciąż domyślnie używają starej metody, a nie nowej.

Aby uzyskać więcej informacji na temat zastrzeżeń dotyczących background-size wymeldowania docs MDN: https://developer.mozilla.org/en-US/docs/CSS/background-size