Zmienianie adresu URL obrazu przy użyciu właściwości @media - html, css, image, user-interface, responsive-design

Próbuję rozwinąć czuły Strona internetowa. Mam wyświetlać dwa różne obrazy w widoku pulpitu i widoku mobilnym. Próbowałem zmienić obraz za pomocą właściwości @media CSS, lubię to.

 #login-top-shadow{
max-width: 100%;
@media only all and (max-width: 700px) {
content:url("img/login_top_shadow_mobile.png");
}
}

Obraz, który ma być pokazany w widoku pulpitu, jest podany dla src atrybut mojego obrazu.

Podczas zmniejszając rozmiar strony, obraz się nie zmienia. jat zmiany we właściwościach CSS w konsoli, ale nie w html.

Czy jest to właściwe podejście do umieszczania obrazów podczas umieszczania obrazów w responsywnym projekcie sieciowym? Dołączanie zrzutu ekranu mojej konsoli.

Odpowiedzi:

Proponuję ci stworzyć div a następnie ustaw go background-image do czegoś.

https://jsfiddle.net/6hj41pft/

    <div></div>

div {
background-image: url("http://images.clipartpanda.com/clipart-sun-decorative_sun_clip_art_23259.jpg");
height: 400px;
width: 400px;
background-size: cover;
}

@media screen and (min-width: 480px) {
div {
background-image: url("https://c1.staticflickr.com/1/85/209708058_b5a5fb07a6_z.jpg?zz=1");
}
}