Teoría
Teoría

Construir un fondo complejo: parte 3

Los degradados CSS son imágenes de fondo especiales. Por eso se les aplican todas las propiedades que controlan los fondos: background-position, background-size, background-repeat.

A diferencia de las imágenes habituales cargadas con url(), los degradados no tienen un tamaño «propio». De forma predeterminada, ocupan toda el área de posicionamiento del fondo. Claro que este comportamiento no nos sirve para construir patrones.

Por suerte, podemos indicar el tamaño de un degradado con la propiedad background-size. Por ejemplo:

background-size: 100px 200px;

Esta declaración asigna a todas las imágenes de fondo un ancho de 100px y una altura de 200px.

Al indicar el tamaño de los degradados de fondo, obtenemos un fragmento del patrón cuya repetición podemos controlar con background-repeat.

En este paso aumentaremos el tamaño del contenedor, indicaremos el tamaño de los degradados de fondo y desactivaremos su repetición para ver un solo fragmento del patrón.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Construir un fondo complejo: parte 3</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="pattern"></div> </body> </html>

CSS

.pattern { width: 100px; height: 100px; margin: 100px auto; background-color: #333333; background-image: linear-gradient(135deg, white 25%, transparent 25%), linear-gradient(225deg, white 25%, transparent 25%), linear-gradient(45deg, white 25%, transparent 25%), linear-gradient(315deg, white 25%, transparent 25%); box-shadow: 1px 1px 3px #333333; } html, body { margin: 0; padding: 0; }

ObjetivosRealizado

Aumenta el ancho y la altura del bloque .pattern a 200px.
Después, asigna a todas las imágenes de fondo un tamaño de 100px de ancho y de alto.
Por último, desactiva la repetición de todas las imágenes de fondo.