267 votos

¿Puedo tener varias imágenes de fondo con CSS?

¿Es posible tener dos imágenes de fondo? Por ejemplo, me gustaría tener una imagen de la repetición a través de la parte superior (repeat-x), y repetir otra a través de toda la página (repetir), donde el uno través de toda la página está detrás de la cual se repite en la parte superior.

He descubierto que puedo lograr el efecto deseado en las dos imágenes de fondo por configurar el fondo de html y el cuerpo:

html {
    background: url(images/bg.png);
}

body {
    background: url(images/bgtop.png) repeat-x;
}

Es esta "buena" CSS? Hay un método mejor? Y si lo que quería tres o más imágenes de fondo?

340voto

nickf Puntos 185423

CSS3 permite este tipo de cosas y se parece a esto:

body {
    background-image: url(images/bgtop.png), url(images/bg.png);
    background-repeat: repeat-x, repeat;
}

Las versiones actuales de todos los principales navegadores, ahora lo apoyan, sin embargo, si necesita apoyo IE8 o menos, entonces, la mejor manera de evitar esto es tener extra divs:

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>
body{
    background-image: url(images/bg.png);
}
#bgTopDiv{
    background-image: url(images/bgTop.png);
    background-repeat: repeat-x;
}

28voto

TheLibzter Puntos 449

La forma más sencilla que he encontrado para el uso de dos diferentes imágenes de fondo de un div con esta línea de código:

body {
    background:url(image1.png) repeat-x, url(image2.png) repeat;
}

Obviamente, eso no tiene que ser sólo para el cuerpo de la página web, que usted puede utilizar para cualquier div desea.

Espero que ayude! Hay un post en mi blog que habla sobre esto un poco más en profundidad si alguien necesita más instrucciones o ayuda - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one-div.

15voto

code.rider Puntos 109

el uso de este

body {
background: url(images/image-1.png), url(images/image-2.png),url(images/image-3.png);
background-repeat: no-repeat, repeat-x, repeat-y;
background-position:10px 20px , 20px 30px ,15px 25px;
}

una manera sencilla de ajustar cada posición de la imagen con background-position: y el conjunto de la repetición de la propiedad con la propiedad background-repeat: para cada imagen individualy

Gracias !

13voto

Shannon Puntos 156

Versión actual de FF y el IE y otros navegadores soportan múltiples imágenes de fondo en una sola CSS2 declaración. Mira aquí http://dense13.com/blog/2008/08/31/multiple-background-images-with-css2/ y aquí http://www.quirksmode.org/css/multiple_backgrounds.html y aquí http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

Para el IE, usted podría considerar la adición de un comportamiento. Buscar aquí: http://css3pie.com/

4voto

Mike B Puntos 6275

Sí, es posible, y ha sido implementado por el popular pruebas de usabilidad web Silverback. Si se mira a través del código fuente se puede ver que el fondo se compone de varias imágenes, colocado en la parte superior de uno al otro.

Aquí está el artículo de la demostración de cómo hacer el efecto puede encontrarse en la Vitamina. Un concepto similar para el envasado de estos " piel de cebolla " capas se pueden encontrar en Una Lista Aparte.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X