Cómo hacer un fondo para página web con el comando "centrar imagen"

Escrito por kevin lee | Traducido por reyes valdes
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo hacer un fondo para página web con el comando "centrar imagen"
Los fondos de una página web no tienen que llenar la pantalla del navegador. (earth image by PaulPaladin from Fotolia.com)

Algunas veces el fondo centrado de una página web puede crear un efecto deslumbrante que mejore la imagen de un sitio web. Por ejemplo, una imagen de la tierra flotando sobre un fondo oscuro puede darle la idea a los visitantes de un sitio de astronomía. Muchos desarrolladores usan hojas de estilo para controlar la posición y apariencia de cada objeto del sitio. Esto incluye también a los fondos. Experimenta con fondos centrados eligiendo una de tus imágenes favoritas y usándola para darle estilo a tu página web.

Nivel de dificultad:
Moderadamente fácil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre el bloc de notas. Agrega el siguiente texto para crear un documento HTML vacío:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Prueba para probar una página web </title>

    <!--Insert style section here**-->

    </head> <body>

    <h1>Esta página tiene una imagen centrada como fondo</h1> <input id="Button1" type="button" value="button" /><input id="Text1" type="text" />

    </body> </html>

    Este código crea un encabezado, un botón y una caja de texto.

  2. 2

    Agrega el siguiente código de hoja de estilo debajo de la línea "Insert style section here".

    <style> body { background: url('xyz.jpg') fixed center no-repeat;} </style>

    Esta definición de hoja de estilo centra la imagen de fondo del cuerpo de la página. Reemplaza "xyz.jpg" con una de tus imágenes.

  3. 3

    Presiona "Ctrl+S" para abrir la ventana "Guardar como" del bloc de notas. Escribe "Prueba_centrar_página_web.html" en la caja "Nombre de archivo" y da clic en "Guardar". El bloc de notas guardará el archivo HTML.

  4. 4

    Abre un navegador y presiona "CTRL+O" para abrir la ventana "Abrir Archivo". Localiza el archivo HTML y da doble clic en él. El navegador lo desplegará. Verifica si el navegador centra la imagen de fondo.

Consejos y advertencias

  • La opción "no-repeat" (no repetir) en la declaración de la hoja de estilo previene que la imagen se repita. La opción "fixed" (ajustado) evita que la imagen de fondo se deslice a través de la página cuando la estás recorriendo. Remueve esta opción si deseas que la imagen de fondo se mueva conforme el visitante recorre la página.

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