A veces, al crear un sitio web, es necesario hacer que un div ajuste su altura automáticamente de acuerdo con el fondo sin tener que establecer una altura específica o una altura mínima. Hace que sea conveniente para el desarrollador mientras escribe el código.
Crearemos un elemento img dentro de nuestro div y estableceremos su src igual que el de nuestra imagen de fondo. Su visibilidad se establecerá como oculta para que solo aparezca la imagen de fondo. Establezca la propiedad background-repeat del elemento div en «no-repeat» para no repetir la imagen.
Ejemplo: dado que la imagen es la imagen de fondo del div, el encabezado GeeksforGeeks aparece sobre la imagen.
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-image:
url(https://media.geeksforgeeks.org/wp-content/uploads/20200602195146/0.jpeg);
background-repeat: no-repeat;
}
img {
visibility: hidden;
}
h1 {
position: absolute;
left: 35%;
top: 30%;
color: white;
}
</style>
</head>
<body>
<div>
<h1>GeeksforGeeks</h1>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200602195146/0.jpeg"
alt="Image" />
</div>
</body>
</html>
Producción:
