Currently, the background-image on my website displays properly when the browser occupies the entire screen. However, when I resize the browser window, the image shrinks to a certain point and then suddenly stops adjusting. Here is a visual representation of the issue:
https://i.sstatic.net/Fouse.png
https://i.sstatic.net/PQZsQ.png
In my project, I only have a .CSS file with the following code:
.fondo {
width: 100%;
height: auto;
position: absolute;
background-repeat: no-repeat;
background-image: url("src/assets/images/fondo.png");
background-size: cover;
background-position: center center;
}
And in the .html file, I have placed the following code:
<div class="fondo img-fluid"></div>