Попытка показать два разных изображения в зависимости от двух медиа-запросов ⇐ CSS

[Anonymous]

У меня проблема, и я не знаю, как ее решить.

У меня есть заголовок «topo» с изображением. p>

И мне нужно это изображение в моих версиях для настольных компьютеров и планшетов, но в моем медиа-запросе для смартфона с разрешением 480 пикселей я хочу показать другое изображение, меньшего размера.
Итак, в моем медиа-запросе размером 480 пикселей я пытаюсь передать фоновое изображение с помощью CSS и сделать изображение #logo как display:none, чтобы получить изображение меньшего размера. для смартфона.

Но он не работает, может кто-нибудь мне немного помочь?

Это мой html для этого выпуска:










У меня есть этот медиа-запрос для мобильных устройств

@media screen and (max-width:480px)
{

*
{
margin:0;
padding:0;
border:0;
outline:none;
}

body
{
min-width:320px;
}

#topo
{
width:226px;
margin:10px auto 0 auto;
background:url(../imagens/logo%20-%20C%C3%B3pia.png);
}

.....
}


Это мой медиа-запрос для планшета:

@media screen and (min-width:481px) and (max-width:768px)
{

*
{
margin:0;
padding:0;
border:0;
outline:none;
}

#topo
{
width:700px;
margin:10px auto 0 auto;
background:yellow;
}

#logo
{
float:left;

}

....

}


Подробнее здесь: https://stackoverflow.com/questions/234 ... ia-queries