Imágenes de fondo (background-image)

La propiedad brackground-image permite insertar un conjunto de imágenes dentro de un elemento. Para ello debemos especificar sus nombres:

Elemento { 
     background-image: url("imagen1", url("imagen2", ...); 
}

La primera imagen que se dibuja es la que indicamos al final de la lista.

Por ejemplo vamos a mostrar una imagen de fondo con formato jpg y sobre esta una de tipo png, la primera:

y la imagen png es:

Luego la página que muestra superpuestas las dos imágenes en un recuadro es:

<!DOCTYPE html> 
<html> 
<head> 
<title>Prueba</title> 

<style type="text/css"> 

#recuadro1{
   background-image:  url("logo1.png"), url("foto1.jpg");
   background-repeat: no-repeat;
   width:700px;
   height:450px;
}

body {
  background:white;
  margin:50px;
}

</style> 

</head> 
<body> 

<div id="recuadro1"> 
</div> 

</body> 
</html>

El resultado es:

background-image

Para esto definimos:

#recuadro1{
   background-image:  url("logo1.png"), url("foto1.jpg");
   background-repeat: no-repeat;
   width:700px;
   height:450px;
}

El recuadro coincide con el tamaño de la imagen "foto1.jpg" (700*450) Luego la imagen "logo1.png" es de 150*150 píxeles.

Como vemos primero se dibuja la imagen "foto1.jpg" (que es la última) y luego sobre esta la imagen "logo1.png". Otro cosa importante es inicializar la propiedad background-repeat con el valor no-repeat. En caso de no inicializar dicha propiedad tendremos a la imagen logo1.png repetida dentro del recuadro:

background-image background-repeat

Retornar