Teoría
Teoría

Construir un fondo complejo: final

En este paso terminaremos el patrón. Ya ampliamos el contenedor para que ocupe toda la ventana del mininavegador y el patrón se vea mejor. Solo falta hacer unos pequeños cambios en el fragmento base y repetirlo.

Volvamos a los fondos múltiples. Además de asignar varias imágenes de fondo, puedes controlar el tamaño, la posición y la repetición de cada una por separado. Esta declaración:

background-size: 100px 200px;

Asigna el mismo tamaño a todas las imágenes de fondo. En cambio, esta declaración:

background-size:
  100px 200px,
  200px 300px,
  300px 400px;

Asigna tamaños distintos a las imágenes de fondo.

Para asignar valores distintos a las propiedades de los fondos múltiples, basta con separar esos valores por comas, en el mismo orden en que escribiste las imágenes.

index.html
style.css

HTML

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

CSS

.pattern { height: 100%; 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%); background-position: 0 0, 0 0, 0 0, 0 0; background-size: 100px 100px; background-repeat: no-repeat; } html, body { margin: 0; height: 100%; }

ObjetivosRealizado

Reduce el tamaño de todas las imágenes de fondo a 50px de ancho y de alto.
Después, asigna a los dos primeros fondos la posición 25px 0.
Después, activa la repetición horizontal de todas las imágenes de fondo.
Por último, activa su repetición en todas las direcciones.