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 <body> 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.
Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!
Muy interesante tu explicacion, pero tengo una gran duda, que tengo que hacer para repetir solo la parte inferior de una imagen, por ejemplo, tengo una imagen que aparenta ser una libreta y que en la parte superior parece estar rota pero en lodemas esta bien, solo quiero mostrar hacia abajo la parte buena no se si me explico, para no irnos tan lejos como lo que tienes en tu web, espero me puedas ayudar porque no eh encontrado informacion al respecto, gracias