HTMLstandscreatepodemos hacer que nuestras páginas web se vean más atractivas y cautivadoras agregando una imagen de fondo a nuestra página HTML. Entonces, podemos agregar imágenes de fondo de dos maneras diferentes:
- Agrega una imagen de fondo usando el atributo de imagen de fondo dentro de la etiqueta <body>.
- Agrega una imagen de fondo usando el atributo de estilo HTML.
En este artículo, aprenderemos estos dos métodos para agregar imágenes de fondo a las páginas web.
1. Usar el atributo de imagen de fondo dentro de la etiqueta <body>
En este método, agregaremos una imagen de fondo utilizando el atributo de imagen de fondo dentro de la etiqueta <body>.
Sintaxis:
<fondo del cuerpo=”imagen.png”>
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Background Image</title> </head> <body background="gfg (2).png" > <h3>Welcome to GeeksforGeeks</h3> </body> </html>
Producción:
2. U sando el atributo de estilo HTML.
En este método, agregaremos una imagen de fondo usando el atributo de estilo HTML para un elemento particular en la página web.
Sintaxis:
<div style=”imagen-de-fondo: url(‘img.jpg’);”>
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Background Image</title>
</head>
<body>
<h3>Welcome to GeeksforGeeks</h3>
<div style="background-image: url('gfg (2).png');">
<p>A Computer Science portal for geeks.</p>
<p>A Computer Science portal for geeks.</p>
<p>A Computer Science portal for geeks.</p>
<p>A Computer Science portal for geeks.</p>
<p>A Computer Science portal for geeks.</p>
<p>A Computer Science portal for geeks.</p>
<p>A Computer Science portal for geeks.</p>
<p>A Computer Science portal for geeks.</p>
<p>A Computer Science portal for geeks.</p>
<p>A Computer Science portal for geeks.</p>
<p>A Computer Science portal for geeks.</p>
<p>A Computer Science portal for geeks.</p>
</div>
</body>
</html>
En el ejemplo anterior, podemos ver que no hay una imagen de fondo para el encabezado «Bienvenido a GeeksforGeeks», pero tenemos una imagen de fondo para el div que contiene párrafos.
Producción:
¿Cómo se repite la imagen de fondo?
En HTML, si la imagen es de tamaño pequeño en comparación con el elemento, la imagen se repite horizontal y verticalmente. Se repite hasta llegar al final del elemento. Si no desea repetir la imagen, establezca el valor de background-repeat no-repeat. Analicemos este concepto con la ayuda de un ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
background-image: url('example.png');
}
</style>
</head>
<body>
<h2>welcome</h2>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por portalpirate y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA