Ejemplos de 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.
Contenido del artículo
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.
- Sigue con: Fondo fijo con HTML y CSS
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 comocover
(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 comono-repeat
(no se repite),repeat
(se repite en ambas direcciones),repeat-x
(se repite solo horizontalmente) orepeat-y
(se repite solo verticalmente).background-position
: especifica la posición de la imagen de fondo. Puedes usar valores comocenter 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 incluyenscroll
(se desplaza con el contenido) yfixed
(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
Últimos 10 comentarios
https://www. ejemplode. com/design/v3/images/logo.png
style=\"background-image: url(/images/fondo1.jpg); background-repeat: no-repeat;\"
se lo das dentro del body... eso