<div class="banner">
</div>
.banner {
background-image: url(../img/portada.png);
height: 20rem; /* Setting height because it is empty*/
background-size: cover; /* Fills all available space */
background-position: center center; /* Image grows from the center */
}
@media screen and (max-width: 576px) {
.banner{
width:100%;
}
Does anyone know why the image stays like that when the screen is smaller than 576px and how to fix it?