Antecedentes de tamaño: no cubrir la ampliación de imagen en div

Question

Tengo cuatro de igual tamaño del div creados como esto:

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

cada uno es un 50% del ancho de la página y con posición absoluta. Así, por ejemplo:

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

El problema es cuando intento de escalar una imagen de fondo (grande) a través de la cubierta de CSS3. Este es el css imagen de fondo que tengo hasta ahora:

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

Aquí es un ejemplo vivo: http://jsfiddle.net/TqQv7/

Si abre el marcador de imagen aquí: http://placekitten.com/2000/1000 verá que la imagen no se está ampliando correctamente.

¿Echo de menos algo?

Answer 1

Al eliminar las partes background-position y background-attachment de su declaración abreviada background obtendrá los resultados deseados.

Cambio:

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

Para:

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

Aquí es una demostración: http://jsfiddle.net/TqQv7/1/

Usando background-position ybackground-attachment junto con background-size : cover es anti-intuitivo, usted está diciendo el navegador para hacer dos cosas diferentes allí, y parece que los navegadores modernos siguen prefiriendo el método anterior en lugar del nuevo.

Para obtener más información sobre advertencias en relación background-size Check-out la documentación MDN: https://developer.mozilla.org/en-US/docs/CSS/background-size