Cómo cambiar el tamaño de una imagen para que se adaptate al fondo de pantalla de una página web

Escrito por david weedmark Google | Traducido por alejo beltzer
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo cambiar el tamaño de una imagen para que se adaptate al fondo de pantalla de una página web
Aprende a cambiar el tamaño de una imagen para que se adapte al fondo de pantalla de una página web. (Peter Macdiarmid/Getty Images News/Getty Images)

Si posees una imagen de gran tamaño que deseas utilizar como imagen de fondo en una página web, puedes utlizar el código HTML (del inglés Lenguaje para Marcado de Hipertexto) para hacer que el tamaño de la imagen se ajuste de tal manera que ocupe la pantalla completa. Esta acción funcionará sin importar el tamaño que tenga la pantalla ni el tamaño del navegador que se utiliza para abrir la página web. Ya que esta acción hace que el navegador cambie el muestreo de la imagen original, puede que baje la velocidad de carga de tu página web. Es por eso que debes utilizar esta acción cuidadosamente.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Carga la imagen que deseas utilizar como fondo en tu servidor web en caso que todavía no esté subida a la red. Toma nota de la dirección web (la URL), la cual debería ser algo como "http://sample.com/image.jpg". Para asegurarte de que anotaste la dirección correcta, debes abrirla en algún navegador web y copiar la dirección que se encuentra en el campo de direcciones del navegador.

  2. 2

    Abre la página web utilizando un editor HTML como el bloc de notas para que puedas ver el código HTML.

  3. 3

    Busca la etiqueta "</head>" en la página. Todo el código que se encuentra debajo debe ser colocado en las líneas que le siguen a esta etiqueta.

  4. 4

    Escribe o copia y pega "<body style="padding:0px; margin:0px; overflow:hidden;">" en la primera línea de código luego de la etiqueta "</head>".

  5. 5

    Ahora escribe o copia y pega "<div style="position:absolute; width:100%; height:100%; margin:0px; padding:0px; left:0px; right:0px;z-index:1"> <img src="http://www.sample.com/image.jpg" width="100%" height="100%"> </div>" en la siguiente línea de código. Vuelve a colocar la URL de la imagen de muestra en este lugar con la dirección web correspondiente de tu imagen.

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