Las propiedades de la etiqueta background se utilizan para dar efectos en el fondo de los elementos.
Son 5, las diferentes propiedades con las que cuenta esta etiqueta.
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
En esta entrada vamos a explicar algunas de las diferentes formas de utilizar esta etiqueta y sus propiedades.
Como ejemplo tenemos el diseño de esta página, a la que le hemos colocado un fondo de repetición. ¿Cómo crearíamos ese fondo?
En primer lugar abrimos nuestra carpeta «plantilla» para empezar un proyecto nuevo y en nuestro archivo index.html comenzamos a escribir lo siguiente:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link href="estilos/reset.css" rel="stylesheet" type="text/css"> <link href="estilos/home.css" rel="stylesheet" type="text/css"> <title>Nombre de tu documento</title> </head> <body> <div id="contenedor_global"> <h1>Este es el titular de mi página</h1> </div> </body> </html>
Hemos creado un solo div y es suficiente para jugar con 3 fondos diferentes. Lo vemos.
El primer elemento al que vamos a aplicar un fondo será el body. Para ello escribimos:
body {
background-image:url(../imagenes/fondo-body.png);
background-position:0 0;
background-repeat:repeat;
}
¿Qué quiere decir esto? Muy sencillo. Explico una a una cada propiedad:
background-image | Aplica una imagen de fondo al elemento que es llamada desde su localizador URL.
background-position | Asigna la posición desde la que debe comenzar el fondo asignado. Las coordenadas son ‘x’ e ‘y’. Con 0 0 le estamos diciendo que empiece desde el punto 0 del eje x y desde el punto 0 del eje y, o lo que es lo mismo y hablando «en plata», desde arriba a la izquierda. 😀
background-repeat | Establece las diferentes propiedades de repetición. En este caso, repeat, significa que repita tanto el eje x como el eje y, por lo tanto creará un mosaico de repetición sobre todo el elemento contenedor.
Con estas tres líneas de código ya hemos dado un fondo de repetición o mosaico a toda la página, o lo que es lo mismo, al elemento body. Ahora vamos a darle estilo al div «contenedor_global».
#contenedor_global {
width:600px;
height:400px;
margin:20px auto;
background-color:#d9d9d9;
padding:50px;
}
A este contenedor solo le hemos asignado un color con la propiedad background-color. Probemos con la etiqueta <h1>. Vamos a colocar una línea de separación por debajo del texto que tenga 2px de altura y que se repita a lo largo del eje x para que quede de la siguiente manera:
h1 {
width:600px;
float:left;
color:#333;
font-size:20px;
font-family:Verdana, Geneva, sans-serif;
padding-bottom:12px;
background-image:url(../imagenes/linea-separacion-horizontal.png);
background-position:left bottom;
background-repeat:repeat-x;
}
Como verás, he vuelto a usar las mismas propiedades que en el body, pero diferentes valores en:
background-position | Le indico que empiece desde la izquierda y desde abajo y lo expresamos en texto. Más valores para esta propiedad.
background-repeat | Le indicamos que la imagen debe repetirse a lo largo del eje x. Más valores de la propiedad background-repeat.
Hoy hemos aprendido a crear imágenes de repetición y diferentes formas de hacerlo. Espero que te haya servido de ayuda. 🙂
Como siempre, puedes ver cómo ha quedado nuestro código o si quieres descargar los archivos, puedes probar con las imágenes que he utilizado.
¡Hasta la próxima! 😀
