Capas de imágenes en CSS: ¿es posible poner 2 imágenes en el mismo elemento?

Question

Supongamos que estoy configurando una imagen de fondo para una página web en CSS como esta:

body    {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: Verdana, Arial, Sans-Serif;
background-color: #9D5922;
color: #000;
margin-left: auto;
margin-right: auto;
margin: 0;
padding: 0; 
background: url(images/desk.gif) repeat bottom left;
}

¿Hay alguna forma de colocar una segunda imagen encima del escritorio.gif dentro del propio elemento del cuerpo, o es la única forma de crear una clase separada y usar el eje z?

Lo siento, es una pregunta simple, pero he estado tratando de resolver esto y, aunque no he podido hacerlo funcionar, tampoco he encontrado una respuesta clara a la idea en ninguna parte en línea...Entonces, ¿hay alguna manera o es simplemente algo que no se puede hacer?

¡Gracias!

Answer 1

En resumen, no es posible. Puede hacer esto, pero necesita agregar un segundo objeto HTML a la página para que funcione. Entonces, por ejemplo, coloque un bloque div justo debajo de su cuerpo y asigne el segundo fondo a ese objeto.

¡Espero que esto ayude!

Answer 2

Los fondos en capas son parte del Borrador de trabajo CSS3 pero, hasta donde yo sé, el soporte para ellos se limita a navegadores basados ​​en WebKit/KHTML como Safari, Chrome, Konqueror y OmniWeb.

Usando su código de ejemplo, esto se vería así:

body    {
    font-size: 62.5%; /* Resets 1em to 10px */
    font-family: Verdana, Arial, Sans-Serif;
    background-color: #9D5922;
    color: #000;
    margin-left: auto;
    margin-right: auto;
    margin: 0;
    padding: 0; 
    background: url("images/top.gif") left bottom repeat,
                url("images/desk.gif") left bottom repeat;
}

Answer 3

Ya publiqué la solución en una pregunta duplicada, pero para cualquiera que necesite esta información, también la publicaré aquí.

Hasta donde yo sé, no es posible ponerlo en la misma capa, pero es posible poner varias imágenes en divisiones separadas una encima de la otra, y ha sido implementado por el popular sitio web de pruebas de usabilidad Silverback (verifique el fondo para ver cómo se ha colocado en capas). Si observa el código fuente, puede ver que el fondo está formado por varias imágenes, una encima de la otra.

Aquí está el artículo que demuestra cómo hacer el efecto en Vitamina . Un concepto similar para envolver estas capas de 'piel de cebolla' se puede encontrar en Una lista aparte .

Answer 4

Hoy en día esto se puede hacer en todas las " modern " navegadores (no < IE9, afaik). Puedo confirmar que funciona en Firefox, Opera, Chrome. No hay ninguna razón para no hacerlo, siempre que tenga una solución alternativa adecuada para navegadores / IE más antiguos.

Para la sintaxis puede elegir entre

  background:url(..) repeat-x left top,
             url(..) repeat-x left bottom;

y

  background-image:url(..), url(..);
  background-position:left top, left bottom;
  background-repeat:repeat-x;

No necesita los saltos de línea, pero la coma es importante.

---

¡Atención! Lo siguiente creará dos fondos, aunque haya especificado solo una URL de imagen:

  background-image:url(..);
  background-position:top, bottom;

---

Y, por supuesto, existe la alternativa de usar contenedores anidados, pero esto hinchará su html.

Answer 5

La única forma es usar otro contenedor. Cada elemento puede contener solo una imagen de fondo.

Answer 6

Utilice el posicionamiento absoluto y un índice z para obtener el segundo elemento en la parte superior.

Answer 7

texto del enlace

El enlace mencionado anteriormente describe mejor lo que estás haciendo ...

Answer 8

No olvides que puedes aplicar estilos al elemento HTML:

html {
background: url(images/whatever.gif);
}