Fondos múltiples con tamaño de fondo

Estoy intentando crear un fondo de página con una superposición usando el soporte de fondo múltiple de css3;Fondos múltiples con tamaño de fondo

html, body { 
    background: url('https://github.com/jaysalvat/vegas/raw/master/overlays/01.png') repeat, 
       url('http://farm8.staticflickr.com/7260/7502004958_595bf03fbf_z.jpg') top left no-repeat; 
    background-size: cover; 
}

Quiero la imagen de fondo de fotos para "cubrir" la página y la superposición para ser pequeño (3 * 3px) repetir sobre la página agujero.

El ejemplo anterior me da http://jsfiddle.net/tpmD4/ (también la superposición que cubre la página).

¿Cómo puedo solucionar eso?

Cuando intento especificar el background-size para las dos imágenes (background-size: 3px 3px, cover;); entonces el fondo de la imagen no cubre, pero la superposición funciona.

Fuente

2012-07-13 Mattias

No estoy seguro si lo que estás tratando de hacer es posible, pero parece que se hiciese lo que tendría sentido para poder especificar el propiedad de fondo de tamaño para cada imagen. Solo creo que puedo pensar en hacer es colocar un div con ancho y alto 100% y colocar su segunda imagen de fondo en ese div. –

Esta página sugiere que debería funcionar: http://www.css3.info/preview/background-size/ ---- #examplen { ancho: 580px; altura: 200px; background-image: url (img/sheep.png), url (img/sheep.png), url (img/betweengrassandsky.png); background-repeat: no-repeat; posición de fondo: 20px 100px, 400px 50px, parte inferior central; color de fondo: #EEE; tamaño de fondo: 70px, automático, cubierta; } –

Okey También creo que debería ser posible, he pensado en tu idea, pero estoy tratando de evitar el segundo div si es posible ... ¡gracias! – Mattias

Aquí van:

html, body { 
    background-image: url(01.png), url(z.jpg); 
    background-repeat: repeat, no-repeat; 
    background-position: 0 0; 
    background-size: 3px 3px, cover; 
}

http://jsfiddle.net/tpmD4/6/

Fuente

2012-07-13 10:40:09

¡Muchas gracias, funciona genial! – Mattias

Por supuesto, no desea que una sola imagen pequeña cubra todo el fondo, ¡desea repetirla con el tamaño adecuado! ¡Muchas gracias por esto! –

Puede que sea algo roto en la última versión de Chrome, pero las propiedades de posición y tamaño de fondo no están haciendo nada por mí. Los fondos separados por comas funcionan bien sin embargo. – Gopherkhan

Fondos múltiples con tamaño de fondo

Respuesta

Cuestiones relacionadas