Задать вопрос
@Syrone
html

Разные экраны, разные разрешения фоновых картинок. Как?

Предстоит задача с фоновым изображением на всю страницу.

Под разные экраны свое изображение. Указывать в CSS файле через медиа запросы не подходит. Вариант с picture тоже, так как это фоновое изображение на котором строится остальная страница. По мне это будет не правильно, если это не так, то скажите почему. Ну и если через picture, то придется на absolute садить его.

Фоновое изображение будет заменяться через CMS, следовательно нужно будет сделать через атрибут style и из-за этого вопрос и возник, если картинка будет заменяться, то как сделать под разные разрешения экрана свою картинку через html файл?
  • Вопрос задан
  • 151 просмотр
7 комментариев
Подписаться 1 Средний 7 комментариев
Решения вопроса 1
delphinpro
@delphinpro Куратор тега HTML
frontend developer 
body {
  background: black no-repeat / cover;
  background-image: var(--bg-image-mobile);
}
@media (min-width: 768px) {
  body {
    background-image: var(--bg-image-tablet);
  }
}
@media (min-width: 1200px) {
  body {
    background-image: var(--bg-image-desktop);
  }
}


<body style="
  --bg-image-mobile: url(/images/bg-image-mobile.jpg);
  --bg-image-tablet: url(/images/bg-image-tablet.jpg);
  --bg-image-desktop: url(/images/bg-image-desktop.jpg);
">

</body>
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Доработать блокчейн на golang
28 апр. 2024, в 17:10
20000 руб./за проект
100 лидов на сайт - нужен трафик
28 апр. 2024, в 15:00
100000 руб./за проект
Разработать сервер питон
28 апр. 2024, в 14:43
5000 руб./за проект
Ещё заказы