Teoría
Teoría

Efectos con fondo repetido

Los fondos repetidos suelen usarse para crear efectos decorativos interesantes. Por ejemplo, con ellos se pueden hacer:

costuras;
bordes dentados;
degradados y sombras.

Sí, los degradados y las sombras también se pueden hacer con CSS. Pero para sombras o degradados complejos, a veces resulta más fácil usar un PNG semitransparente.

Lo más importante al crear este tipo de efectos es elegir una imagen con el patrón de repetición adecuado. Puede ser muy pequeña y aun así ahorrar bastante peso en la página.

Vamos a practicar. Solo una cosa: cambien el modo de repetición después de definir la imagen de fondo. Así se verá con más claridad qué está pasando.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Efectos con fondo repetido</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="block block1"></div> <div class="block block2"></div> <div class="block block3"></div> </body> </html>

CSS

body { padding-top: 40px; } .block { height: 70px; margin: 30px 50px; background-color: #3498db; background-repeat: no-repeat; border-radius: 5px; box-shadow: 1px 1px 3px #999999; } .block1 { background-position: -30px 30px; } .block2 { background-position: 0 0; } .block3 { background-position: 0 100%; }

ObjetivosRealizado

Definan imágenes de fondo que se repitan en horizontal:

stitch.png en el primer bloque,
zigzag.png en el segundo bloque,
shadow.png en el tercer bloque.