Cómo crear un fondo de repetición con CSS

Las propiedades de la etiqueta background se utilizan para dar efectos en el fondo de los elementos.

background de repetición

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:

linea-repeticion
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! 😀