Как сделать так, чтобы картинка подменялась в соответствии с положением телефона?

Question

[Skinner]

Добрый день!
Делаю мобильную версию странички и застрял на моменте, когда мне нужно отображать 2 разные картинки.
1 картинка, когда устройство вертикальное и другая, когда устройство горизонтальное.
Подскажите!

Answer 1

[Андрей Гончаров]

Попробывать:

@media only screen and (orientation: portrait) {
  background: XXXX;
}
@media only screen and (orientation: landscape) {
  background: XXXX;
}

Comments

[Skinner]

Видимо сделал что-то не так, поскольку не работает так как нужно :

media only screen and (orientation: portrait) {
#bg{background: url(/f/bgv.png);
}
}

media only screen and (orientation: landscape) {
#bg{
background:url(../f/bg.png)}
}

[Андрей Гончаров]

Я не могу точно сказать про поддержку всеми браузерами этой конструкции, но в современных мобилых должно быть норм все. Проверь пути до изображений.

[devKazhan]

у Вас в первом "portrait" лишние скобы

Answer 2

[Aleksandr]

Тык

Answer 3

[devKazhan]

Или просто задай нужную ширину
media only screen and (width:320px){
.bla: /path/to/img
}
media only screen and (width:620px){
.bla: /path/to/img
}