Bordes redondeados (border-radius) Bordes redondeados en los vértices Sombras (box-shadow) Sombras múltiples (box-shadow) Sombras interiores Sombras con transparencias Sombras de texto Rotación Punto de origen Escalado Translación Torcer (transform:skew) Múltiples transformaciones en forma simultanea Opacidad (opacity) Opacidad (color) Múltiples columnas (column-count) Múltiples columnas dinámicas (column-width) Múltiples columnas y su separación (column-gap) Múltiples columnas y línea separadora (column-rule) Importar una fuente no disponible en el navegador (@font-face) Imágenes de fondo (background-image) Imágenes de fondo en diferentes posiciones (background-position) Imágenes de fondo (background-size) Imágenes de fondo (background-origin) Transiciones de una propiedad (transition) Transiciones de múltiples propiedades (transition) Transiciones (funciones de transición) Transiciones (tiempo de demora en iniciar la transición) Transiciones (otra sintaxis para hacer lo mismo) Animaciones (sintaxis básica) Animaciones (animation-iteration-count y animation-direction) Animaciones (animation-timing-function y animation-delay) Animaciones (animation-play-state) Animaciones (definición de más de 2 keyframes)

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: