Cómo hacer un mosaico de una imagen en HTML

Escrito por jim campbell | Traducido por contributing writer
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer un mosaico de una imagen en HTML
Una imagen puesta en mosaico en una página web. (seamless repeat pattern, image by Accent from Fotolia.com)

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.

Otras personas están leyendo

Instrucciones

  1. 1

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

  2. 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); }

  3. 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; }

  4. 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; }

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles