Cómo usar DIVs para fondo

Escrito por yvonne garcia | Traducido por analia moranchel
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo usar DIVs para fondo
Aunque la llegada de HTML5 eventualmente vuelva obsoleta la etiqueta DIV, todavía es útil. (Hemera Technologies/AbleStock.com/Getty Images)

Se utiliza la etiqueta DIV para crear bloques que pueden personalizarse mediante varios atributos CSS (hoja de estilo en cascada, por sus siglas en inglés). Aunque la llegada de HTML5 eventualmente vuelva obsoleta la etiqueta DIV, todavía es útil. Utilizar la etiqueta DIV con atributos en línea puede ser una forma rápida de personalizar una sección específica de una página. La etiqueta DIV puede utilizarse como un contenedor para crear un fondo para una porción específica de la página. El fondo puede ajustarse a una imagen o un color sólido.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Instrucciones

    Dar color a un fondo

  1. 1

    Encuentra el código de color HTML para el fondo. Un recurso para obtener el mismo es el sitio web HTML Color Picker (ver Recursos).

  2. 2

    Agrega el atributo "background-color" como una opción de estilo de la etiqueta DIV. Define el atributo con el código de color HTML. Para el negro, el código es el siguiente:

    <DIV style="background-color:#000000"> tu texto aquí </div>

  3. 3

    Sube tu página web y mira la página en varios navegadores para comprobar el código.

    Configurar fondo en una imagen

  1. 1

    Sube la imagen de fondo a tu servidor web o a un servicio que te permita vínculos directos a las imágenes.

  2. 2

    Agrega el atributo "background-image" como una opción de estilo a la etiqueta DIV. Define el atributo con el siguiente código: "url(pathtoimage)". Reemplaza el texto dentro de los paréntesis para que coincida con la ruta de la imagen que deseas utilizar. Para una imagen llamada "background.jpg" que se encuentra en una carpeta llamada "imágenes" en el mismo directorio que la página web, el código es el siguiente:

    <DIV style="background-image: url(/images/background.jpg)"> tu texto aquí </div>

  3. 3

    Sube tu página web y visita la página en varios navegadores para comprobar el código.

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