repetir-fondo-css

Repetir un fondo con CSS es muy básico y efectivo para ahorrarnos KB al tener una única imagen minúscula que se repite por toda la pantalla y así, acelerar la carga de la página.

Por ejemplo, en CSSBlog hemos usado la imagen de fondo que ahora tenemos. Vamos a repetir esta imagen uniformemente por toda la pantalla (es muy pequeña, parece que no se ve, pero está ahí):

La clave para repetir un fondo se encuentra en la propiedad background, en el valor “repeat“. Podemos repetir una imagen verticalmente (“repeat-y)”, horizontalmente (“repeat-x”), o en las dos coordenadas (“repeat”).

Os mostraremos el código CSS necesario para lograr que la textura anterior se repita por todo el fondo de CSSBlog.es:

body {

background: #deebf2 url(http://www.midominio.com/images/textura.jpg) repeat;

}

Se estiliza la etiqueta del documento, para darle una textura con repetición en las coordenadas “x” e “y”. Si la imagen no se encuentra, se procederá a rellenar el fondo del sitio con el color #deebf2.

Con esto ya tendríamos un fondo repetido, y también nos habríamos ahorrado bastantes KB en nuestro sitio web.