estoy haciendo un reto de front end mentor, y me dan imagenes para el responsive y para desktop, utilice las de desktop y ahora que estoy haciendo el responsive no se como cambiar la imagen, lo que hice primero claramente fue ir a el @media y linkear la imagen, pero no cambia nada, lo que tengo es esto:
HTML:
<section class="info"> // ----> Section que no utilice, lo tengo q borrar
<div class="info-grid"> // ----> Grid
<div class="info-grid-one">
<h2>Transform your brand</h2>
<p>We are a full-service creative agency specializing in helping brands grow ast.
Engage your clients through compelling visuals that do most of the marketing for you. </p> // ----> texto
<button>Learn more</button> // ----> Boton
</div>
<div class="info-img-first"></div> // ----> Imagen
<div class="info-img-two"></div> // ---> Imagen
<div class="info-grid-two">
<h2>Stand out to the right audience</h2>
<p>Using a collaborative formula of designers, researchers, photographers, videographers, and copywriters, we’ll
build and extend your brand in digital places. </p> // ----> texto
<button>Learn more</button> // ----> Boton
</div>
</div>
Desktop:
section .info-img-first {
width:100%;
height: 100%;
background-position: center;
background-image: url(./images/desktop/image-transform.jpg);
background-size: cover;
}
Responsive:
section .info-img-first {
background-image: url(./images/mobile/image-transform.jpg);
}
No se si tengo que anular de alguna forma la primer imagen en el responsive, intente varias cosas pero no funcionaron, muchas gracias por su ayuda
Saludos