Масштабируемо-скрывающийся бэкграунд у сайта

День добрый!
Такая проблема:
нужно расположить картинку на сайте сайте таким образом, чтобы она располагалась по центру правого бока (на сайте там пустое поле)
чтобы на большом разрешении она была высотой 700px, при более маленьких разрешениях она скрывалась, а на мобильных устройствах она скрывалась вовсе.

то что я напробовал - напрасно

первый вариант
body {background-image: url(http://prosto2.ru/1.jpg); background-position: center right; background-repeat:no-repeat; background:size: 123px auto; background-attachment: fixed; }

затем пробовал так и задавать картинке min-height/max-height, но происходит только почти правильное расположение, т.е. таким образом он не располагается по центру вертикали и по правый край горизонтали
второй вариант
#bgimg { height:80% position:fixed; right: 1px; }
  • Вопрос задан
  • 2885 просмотров
Решения вопроса 1
iiil
@iiil
Инженер и вэб-дизайнер, рисую.
Задача конечно понятна только в общих чертах. Вставьте фиксированный блок в правый верхний угол, сделайте ему background-size: contain и меняйте размеры блока стилями в зависимости от величины viewport'a.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Еще можно попробовать использовать CSS3 Media Queries. Вот отличная статья по их использованию: Адаптивный и мобильный дизайн с CSS3 Media Queries
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы