Una de las características que todos (o la mayoría) conocemos dentro de CSS es el poder asignar una imagen de fondo a los elementos del sitio, gracias al atributo background o background-image.
Pero ¿cuántas veces no hemos tenido la necesidad de poner más de una imagen de fondo a nuestro header o algún otro contenedor? por lo menos yo sí (y muchas veces), esto ya lo podemos hacer utilizando solamente CSS3.
Veamos un ejemplo sencillo, primero que nada busquen dos imagenes en Internet (para cuestiones prácticas guárdenlas en la misma ruta donde estará el archivo ejemplo), tomen en cuenta que serán usadas como imagenes de fondo así que procuren que sean imágenes pequeñas. Cabe destacar que el elemento que crearemos para la práctica será la etiqueta <header> (el cual nos sirve para hacer una cabecera a la página).
A continuación hay que crear un archivo nuevo y escribir el siguiente código en él:
<!DOCTYPE html>
<html lang="es">
<head>
<title> Doble iamgen de fondo</title>
<style>
body
{
background-color: #000;
}
header
{
background: url("logo.png") no-repeat 10px 10px,
url("textura.gif");
height: 120px;
}
h1
{
margin-left:150px;
}
</style>
</head>
<body>
<header>
<h1>El título de la cabecera</h1>
</header>
</body>
</html>
Ahora explicaremos lo que sucede, primero el html y después los estilos(es lo realmente importante).
En la linea 23 a 25 hay un elemento de tipo <header> que nos servirá como cabecera del documento, dentro de ésta hay una etiqueta de encabezado <h1> que contiene un título… es todo
Lo realmente importante son los estilos, que creamos de las lineas 6 a 24
En las lineas 7 a 10 le estamos dando al body un color de fondo negro:
body
{
background-color:#000;
}
Y lo interesante viene a continuación, en las lineas 14 a 16 estamos asignado los estilos para la etiqueta <header>, en la linea 14 agregamos el atributo background con los valores url(“logo.png”) no-repeat 10px 10px
background: url("logo.png") no-repeat 10px 10px,
En donde “logo.png” es la primera imagen de fondo, le decimos que no se repetirá y lo posicionaremos a 10px con respecto al magen superior e inferior y 10px con respecto a los margenes izquierdo y derecho, a continuación escribimos una coma (,) y si lo deseamos en una nueva linea ponemos los valores para la segunda imagen de fondo:
url("textura.gif");
Como podemos ver en el código solo estamos asignando el valor url(“textura.gif”), al ser el único valor significa que la imagen se repetirá tanto vertical como horizontal, posteriormente el siguiente atributo height define la altura de la cabecera a 120px.
¿Y así es como a un elemento le agregamos dos imágenes como fondo, sencillo no?
Si quieren ver el ejemplo en funcionamiento pueden dar click .
Espero haya sido de su agrado, cualquier duda o comentario son aceptados.
Me iluminaste, gacias 😉
Muy buen tip, gracias 😉
Estaría bueno ver tabla de compatibilidad y fixes. Según tengo entendido IE8 tiene bastantes problemas con esto.
Hola gracias por el tutorial, pero no me funciono, estoy trabajando en un web en Drupal 7 y no se porque no me funciona. ¿puedes ayudarme?
hola, no se te habra ido alguna coma o algo? Te pasa en todos los navegadores? Drupal no deberia de ser el problema