Ejemplos de Cómo Poner Imagen De Fondo En HTML

Inicio » HTML » Cómo poner imagen de fondo en HTML

¿Quieres poner una imagen de fondo en html? En este artículo, te diremos cómo. Discutiremos el atributo background en la etiqueta <body> en de HTML, su funcionalidad y por qué es preferible usar CSS para aplicar imágenes de fondo en la actualidad.

Imagenes de fondo con 'body background' en  HTML

En HTML 4.01, se utiliza el atributo background en la etiqueta <body> para establecer una imagen de fondo en la página web. La sintaxis es simple y directa:

<html>
<head>
<title>Imagen de fondo en HTML</title>
</head>
<body background="imagen_fondo.jpg">
<h1>Imagen de fondo en HTML</h1>
<p>Este ejemplo muestra cómo poner una imagen de fondo en una página web utilizando el atributo 'background' en HTML 4.01.</p>
</body>
</html>

Donde imagen_fondo.jpg es la imagen que se desea utilizar como fondo. Dicha imagen debe estar en la misma carpeta que el archivo html.

El atributo background permite definir la URL de la imagen que se quiere usar como fondo del cuerpo de la página web. Sin embargo, este enfoque tiene limitaciones, ya que no da un control detallado sobre la apariencia y el comportamiento de la imagen de fondo.

El atributo background en la etiqueta <body> tiene solo una función y no permite controlar aspectos como el tamaño, la posición, la repetición o el comportamiento del desplazamiento de la imagen de fondo.

Este atributo ha sido eliminado en HTML5 y no es compatible con los estándares actuales ni con los navegadores modernos.

Uso de CSS para imágenes de fondo en HTML

Dado que el atributo background está obsoleto, se recomienda utilizar hojas de estilo en cascada (CSS) para aplicar imágenes de fondo y otros estilos en la página web. CSS permite un control más detallado y flexible sobre la apariencia y el diseño de la página. Aquí hay un ejemplo de cómo aplicar una imagen de fondo usando CSS:

<html>
<head>
<title>Imagen de fondo en HTML y CSS</title>
<style>
body {
background-image: url("imagen_fondo.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>Imagen de fondo en HTML y CSS</h1>
<p>Este ejemplo muestra cómo poner una imagen de fondo en una página web utilizando HTML y CSS.</p>
</body>
</html>

Donde imagen_fondo.jpg es la imagen que se desea utilizar como fondo. Dicha imagen debe estar en la misma carpeta que el archivo html.

Con CSS, puedes utilizar diversas propiedades para controlar el comportamiento y la apariencia de la imagen de fondo:

  • background-image: define la imagen de fondo.
  • background-size: establece el tamaño de la imagen de fondo. Puedes ajustarlo a valores como cover (cubre todo el espacio de la pantalla manteniendo la proporción), contain (se ajusta al tamaño máximo manteniendo la proporción) o especificar dimensiones fijas en píxeles o porcentajes.
  • background-repeat: controla la repetición de la imagen de fondo. Puedes configurarla como no-repeat (no se repite), repeat (se repite en ambas direcciones), repeat-x (se repite solo horizontalmente) o repeat-y (se repite solo verticalmente).
  • background-position: especifica la posición de la imagen de fondo. Puedes usar valores como center center (centro vertical y horizontal), top left (arriba y a la izquierda), bottom right (abajo y a la derecha), o cualquier combinación de palabras clave o coordenadas numéricas.
  • background-attachment: determina si la imagen de fondo se desplaza con el contenido o se mantiene fija en su posición. Los valores posibles incluyen scroll (se desplaza con el contenido) y fixed (permanece en la misma posición).
  • background-color: establece el color de fondo de un elemento. Esto es útil si la imagen de fondo no cubre completamente el área y deseas un color de fondo específico.

Imagen de fondo a pantalla completa

<html>
<head>
<title>Imagen de fondo que cubre toda la pantalla</title>
<style>
body {
margin: 0;
background-image: url("imagen_fondo.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
min-height: 100vh;
}
</style>
</head>
<body>
<h1>Imagen de fondo pantalla completa</h1>
<p>Este ejemplo muestra cómo aplicar una imagen de fondo en CSS que cubra toda la pantalla.</p>
</body>
</html>

En este ejemplo, las propiedades CSS utilizadas son las siguientes:

  • margin: 0: elimina los márgenes predeterminados del navegador en el elemento <body>.
  • background-image: url("imagen_fondo.jpg"): define la imagen de fondo utilizando la URL de la imagen.
  • background-size: cover: ajusta el tamaño de la imagen de fondo para que cubra todo el espacio disponible manteniendo su proporción.
  • background-repeat: no-repeat: evita que la imagen de fondo se repita.
  • background-position: center center: centra la imagen de fondo tanto vertical como horizontalmente.
  • background-attachment: fixed: mantiene la imagen de fondo fija en su posición mientras se desplaza el contenido.
  • min-height: 100vh: establece la altura mínima del elemento <body> en el 100% de la altura de la ventana del navegador (viewport height). Esto garantiza que la imagen de fondo cubra toda la pantalla, incluso si el contenido es más corto que la altura de la ventana.

Imagen de fondo que se repita

<html>
<head>
<title>Imagen de fondo que se repite</title>
<style>
body {
margin: 0;
background-image: url("imagen_fondo.jpg");
background-repeat: repeat;
min-height: 100vh;
}
</style>
</head>
<body>
<h1>Imagen de fondo que se repite</h1>
<p>Este ejemplo muestra cómo aplicar una imagen de fondo en CSS que se repita en toda la pantalla.</p>
</body>
</html>

En este ejemplo, las propiedades CSS utilizadas son las siguientes:

  • margin: 0: elimina los márgenes predeterminados del navegador en el elemento <body>.
  • background-image: url("imagen_fondo.jpg"): define la imagen de fondo utilizando la URL de la imagen.
  • background-repeat: repeat: hace que la imagen de fondo se repita tanto horizontal como verticalmente.
  • min-height: 100vh: establece la altura mínima del elemento <body> en el 100% de la altura de la ventana del navegador (viewport height). Esto garantiza que la imagen de fondo cubra toda la pantalla, incluso si el contenido es más corto que la altura de la ventana.

Imagen de fondo que no se mueva

<html>
<head>
<title>Imagen de fondo fija</title>
<style>
body {
margin: 0;
background-image: url("imagen_fondo.jpg");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
min-height: 100vh;
}
</style>
</head>
<body>
<h1>Imagen de fondo fija</h1>
<p>Este ejemplo muestra cómo aplicar una imagen de fondo en CSS que no se mueva al desplazar el contenido.</p>
</body>
</html>

En este ejemplo, las propiedades CSS utilizadas son las siguientes:

  • margin: 0: elimina los márgenes predeterminados del navegador en el elemento <body>.
  • background-image: url("imagen_fondo.jpg"): define la imagen de fondo utilizando la URL de la imagen.
  • background-repeat: no-repeat: evita que la imagen de fondo se repita.
  • background-position: center center: centra la imagen de fondo tanto vertical como horizontalmente.
  • background-attachment: fixed: mantiene la imagen de fondo fija en su posición mientras se desplaza el contenido.
  • min-height: 100vh: establece la altura mínima del elemento <body> en el 100% de la altura de la ventana del navegador (viewport height). Esto garantiza que la imagen de fondo cubra toda la pantalla, incluso si el contenido es más corto que la altura de la ventana.

¿Cómo citar? & Del Moral, M. (s.f.). Ejemplos de Cómo Poner Imagen De Fondo En HTML.Ejemplo de. Recuperado el 13 de Junio de 2024 de https://www.ejemplode.com/17-html/532-ejemplo_de_como_poner_imagen_de_fondo_en_html.html

HTML
Escrito por:
Editado por:
Mauricio del Moral Durán
Master en Comunicación
Universidad Intercontinental
Creado el: 2009-01-29
Última modificación: 2023-04-14

Artículos Relacionados

Últimos 10 comentarios

  1. Donde dice fondo.jpg lo remplazas por la URL de la imagen... por ejemplo:

    https://www. ejemplode. com/design/v3/images/logo.png
    Por Morris 2021-05-06 a las 13:07:42
  2. ¿Cómo puedo poner un fondo de imagen con un vinculo de internet?
    Por Faty MA 2021-05-05 a las 18:14:59
  3. hola alguien sabe porq no se ve el iphone cuando pones un background url( imagen.jpg) fixed no repeat; o que nme hace falta poner
    Por david 2016-07-21 a las 16:18:41
  4. Muy bueno, me ayudó muchísimo
    Por alizon 2015-03-28 a las 1:48:13
  5. Muchas gracias, me sirvió para algo especial.
    Por JEss 2014-01-19 a las 15:16:40
  6. Gracias, me ha servido.
    Por cristhian 2013-11-06 a las 19:37:49
  7. Para que no se repita tienes que darle estilo

    style=\"background-image: url(/images/fondo1.jpg); background-repeat: no-repeat;\"

    se lo das dentro del body... eso
    Por DracoSkin 2013-03-20 a las 14:51:34
  8. La verdad me sirvió de mucho, muchas gracias.
    Por Karl0Z! 2013-03-14 a las 21:15:31
  9. Puse la imagen en el html de un newsletter. En el MAC, se ve perfecto, pero en el PC no veo la imagen de fondo. Probé poniéndolo en el CSS y nada, pasa lo mismo... Alguien sabe por qué pasa esto?
    Por carolina 2012-10-31 a las 12:59:16
  10. Gracias, es muy útil, ahora ya se poner fondo en mí página.
    Por Erendira 2012-10-15 a las 20:25:05

Deja un comentario


Acepto la política de privacidad.