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

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

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

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

Фоновое изображение будет заменяться через CMS, следовательно нужно будет сделать через атрибут style и из-за этого вопрос и возник, если картинка будет заменяться, то как сделать под разные разрешения экрана свою картинку через html файл?
  • Вопрос задан
  • 256 просмотров
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>
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы
Вакансии с Хабр Карьеры
Верстальщик HTML
MST
от 450 $
Баннермейкер (html-5)/дизайнер-верстальщик/motion-дизайнер
BYTIME
от 130 000 ₽
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Переработка интерфейса личного кабинета сотрудника. AgileHR.io
04 янв. 2025, в 04:24
55000 руб./за проект
Записать песню мужским вокалом
04 янв. 2025, в 02:57
3000 руб./за проект
Перевести книгу через GPT чат на иностранный язык
04 янв. 2025, в 02:56
5000 руб./за проект
Ещё заказы