Imagen de fondo (background-image)

La propiedad background-image establece una o más imágenes de fondo para un elemento,de forma predeterminada, una imagen de fondo se coloca en la esquina superior izquierda de un elemento y se repite tanto vertical como horizontalmente.

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("foto_1.jpg");
background-repeat: no-repeat;
width:700px;
height:450px;
}


</style>

</head>
<body>

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

</body>
</html>

El resultado es:

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 "foto_1.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: