La imagen de fondo que vemos en algunos sitios web no solo hace que se vea bien, sino que también mejora la experiencia del usuario. La imagen de fondo tiene el potencial de informar a los usuarios sobre el tema del sitio web, lo que hace que el usuario se apegue al sitio web. Ejemplo: si agrega una imagen de fondo relacionada con un viaje a su sitio web, indica claramente el tema sobre el sitio web y el usuario lo explorará más. Es como cuando proporciona una imagen de fondo, invita a sus usuarios a explorar otras páginas del sitio también.
Después de leer este artículo, podrá establecer una imagen de fondo en una página web utilizando solo HTML y CSS .
Existen dos métodos para establecer una imagen de fondo en un archivo HTML:
- Usando el atributo de fondo en la etiqueta en HTML.
- Mediante el uso de hojas de estilo en línea o internas.
Método 1: mediante el uso de atributos de fondo en la etiqueta en HTML
Sintaxis:
<body background = "image_name.extension">
Valor de la propiedad: contiene el archivo de una imagen que desea utilizar como imagen de fondo.
Nota: HTML 5 no admite el atributo de fondo en la etiqueta <body>, por lo que debemos usar CSS para agregar la imagen de fondo a la página web.
Ejemplo:
<!DOCTYPE html> <html> <head> <title> HTML body Background Attribute </title> </head> <!-- body tag starts here --> <body background= "https://media.geeksforgeeks.org/wp-content/uploads/rk.png"> <center> <h1>GeeksforGeeks</h1> <h2>HTML <body> background Attribute</h2> <a href="#"> It is a Computer Science portal For Geeks </a> </center> </body> <!-- body tag ends here --> </html>
Producción:
Método 2: al usar la hoja de estilo en línea o interna, aquí tenemos que usar el atributo de estilo de HTML y la propiedad de imagen de fondo de CSS.
Sintaxis:
<div style = "background-image: url('Image_name.extension');">
HTML
<!DOCTYPE html>
<html>
<head>
<title> By using Inline CSS</title>
</head>
<body style="background-image: url('image.png');">
<h2>Welcome To GFG</h2>
</body>
</html>
Producción:
