En este artículo, agregaremos una imagen como imagen de fondo de una página web. Las imágenes de fondo se utilizan para hacer que un sitio web sea más interactivo y atractivo. Se puede aplicar en muchos estilos.
Acercarse:
- En la etiqueta del cuerpo , especifique una imagen de fondo en el atributo de fondo pasando la URL de la ruta de la imagen o la ubicación.
- Agregar propiedades de estilo CSS .
Sintaxis:
<body background = "URL or path" > Website Body </body>
Ejemplo 1: en este ejemplo, agregaremos la imagen de fondo utilizando el enfoque anterior.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Website</title> </head> <body background= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> <h1>GeeksforGeeks</h1> <h2>Background Image</h2> </body> </html>
Producción:
imagen 1
Ejemplo 2: En este ejemplo, especificaremos la URL o ruta de la imagen en código CSS usando la propiedad background-image .
Sintaxis:
<style>
body {
background-image:url(" URL of the image ");
}
</style>
Nota: También podemos agregar código CSS bajo la etiqueta de estilo o podemos crear un archivo separado.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Website</title>
<style>
body{
background-image:url(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png");
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Background Image</h2>
</body>
</html>
Nota: Obtendremos el mismo resultado que obtuvimos en el Ejemplo 1.
Ahora entenderemos cómo dar estilo a la imagen de fondo usando las propiedades CSS.
1. Background-repeat: la propiedad background-repeat se usa para agregar o eliminar la repetición de la imagen de fondo en cualquier dirección.
Sintaxis:
background-repeat: no-repeat;
Ejemplo:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Website</title>
<style>
body{
background-image:url(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png");
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Background Image</h2>
</body>
</html>
Producción:
imagen 2
2. Background-attachment y tamaño: La propiedad background-attachment se utiliza para especificar el tipo de archivo adjunto de la imagen de fondo con respecto a su contenedor. La propiedad background-size se utiliza para establecer el tamaño de la imagen de fondo.
Sintaxis:
background-attachment: fixed; background-size: cover;
Ejemplo: estamos especificando que esto se corrija porque no queremos que la imagen de fondo se desplace con la página. Configuramos el tamaño de fondo al 100% para la altura y al 100% para el ancho para cubrir toda la pantalla.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Website</title>
<style>
body{
background-image:url(
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>Background Image</h2>
</body>
</html>
Producción:
imagen 3
Nota: escriba comentarios si encuentra algo incorrecto o si desea compartir más información sobre el tema discutido.
Publicación traducida automáticamente
Artículo escrito por anuragsingh1022 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA