Я пытаюсь изменить изображение src в зависимости от размера экрана, используя медиа-запросы. Я попробовал фон: url (x); но это не сработало. Я где-то читал, что должен использовать контент: url (x), но когда я это сделаю, я получаю пустую страницу. Может ли кто-нибудь сказать мне, что не так с моим кодом?
HTML:
<div class="container" id="at-header">
<img class="image" id="logo" src="img/logo_white.png" />
<img class="image" id="main-img" src="img/desktop_homepage.jpg" />
</div>
CSS
@media screen and (max-width: 767px){
#main-img{
content:url("img/mobile_homepage.jpg");
}
}
@media screen and (min-width: 768px) {
#main-img{
content:url("img/tablet_homepage.jpg");
}
}
@media (min-width: 992px){
#main-img{
content:url("img/desktop_homepage.jpg");
}
}
@media (min-width: 1200px) {
#main-img{
content:url("img/desktop_homepage.jpg");
}
}