Как мне создать фоновое изображение для адаптивного веб-сайта?

Я весь день искал ответ или руководство, но, похоже, ничего не нашел. Я могу пропустить ключевое слово здесь.

У меня есть одностраничный веб-сайт, для которого я хотел бы создать фоновое изображение в фотошопе или иллюстраторе. Я хотел бы иметь возможность создавать это изображение вокруг элементов на веб-странице. Это было бы несложно спроектировать для одного конкретного размера экрана, но расположение элементов и ширина экрана могут существенно меняться от устройства к устройству. У меня есть только две идеи о том, как это сделать, ни одна из которых не кажется хорошим методом:

  1. Создайте фоновое изображение, которое игнорирует элементы на странице и не имеет слишком много деталей справа/слева, чтобы их не обрезали на мобильных устройствах.
  2. Создайте отдельное фоновое изображение для каждого размера устройства и используйте медиа-запросы для загрузки правильного изображения.

Есть ли лучший способ сделать это?

Вот пример того, о чем я говорю:

введите описание изображения здесь

Ответы (2)

Я думаю, что в идеале для мобильных веб-сайтов вы хотите исключить или уменьшить количество загружаемых изображений, чтобы ускорить время загрузки и улучшить читаемость.

Итак, я бы использовал медиа-запросы, но не для загрузки разных изображений для мобильных устройств, а для того, чтобы вообще не загружать изображения для мобильных устройств. Я бы придерживался простых цветов или градиентов, отображаемых с помощью CSS, а не изображений для мобильного сайта.

Когда я разрабатываю адаптивный контент, я всегда вижу его следующим образом:

  • Рабочий стол: все изображения, полный дизайн
  • Планшет: некоторые изображения, при необходимости упростите дизайн.
  • Телефон : Минимум изображений, максимальное упрощение дизайна.

Для меня мобильный просмотр — это гораздо больше передачи информации , а не показа всех возможных наворотов. Я хочу, чтобы пользователи, просматривающие на своем телефоне, могли быстро и без помех получать информацию, так как чаще всего они просматривают, ну, в то время как мобильные, а не сидят где-то просматривая веб-сайты.

Используйте CSS {background-size: cover} (вы также можете поиграть с позицией)

И да, вы можете использовать некоторые медиа-запросы для загрузки другого фона.

Как мне создать фоновое изображение для адаптивного веб-сайта?
СпросиСетьПолитика конфиденциальности1y, 0v