Cómo hacer un mosaico de una imagen en HTML (En 4 Pasos)

Por jim campbell

Las imágenes de fondo son utilizadas para crear diseños atractivos en la mayoría de los sitios web. Un desarrollador web puede crear una imagen simple y mosaicos a lo largo de todo el fondo de la página. El formato en mosaico permite a los desarrolladores de HTML utilizar una imagen de menor tamaño, para que los usuarios con conexiones de Internet lentas no estén obligados a descargar imágenes tan grandes. Puedes hacer el mosaico de una imagen para el fondo de un sitio web usando hojas de estilo en cascada (CSS, por sus siglas en inglés). Puedes colocar la imagen en posición horizontal (eje x), vertical (eje Y) o en ambas direcciones.

Paso 1

Abre el archivo HTML en un editor de texto plano. Desplázate hasta la sección HTML con la etiqueta "". Este es el lugar donde se colocará la imagen de fondo.

Paso 2

Crea el código para establecer una imagen de fondo. Ésta debe estar ubicada en la carpeta "Imágenes" en el disco duro de tu servidor web. El siguiente código establecerá la imagen de fondo "theImage.jpg" en el sitio web:

body { background: white url(/images/theImage.jpg); }

Paso 3

Coloca la imagen en mosaico en posición horizontal. El siguiente código hará que la imagen se repita a lo largo de la página horizontalmente:

body { background: white url(/images/theImage.jpg) repeat-x; }

Paso 4

Repite la imagen horizontal y verticalmente. Esto cubrirá toda la sección de fondo en el navegador del usuario. El siguiente código hará un mosaico de tu imagen: body { background: white url(/images/theImage.jpg) repeat-x repeat-y; }