Как картинку фон сайта сделать на весь экран

Как сделать background-image на весь экран, при условии того, что будет видна вся картинка?

Пробовал разные свойства, но выходит так, что background-image все равно не растягивается должным образом. Нужно, чтобы задний фон покрывал всю страницу сайта, при этом картинка отображалась на 100%, background-image: cover не помогло

  • Вопрос задан более трёх лет назад
  • 17114 просмотров

DENDIBAEV

DENDIBAEV

space2pacman

DENDIBAEV

Ankhena

delphinpro

CSS Как растянуть фон на весь экран

Этот код не мой и старый я иногда юзаю этот метод ну зачем бездумно копировать-то?
посмотрели бы актуальную поддержку браузерами caniuse.com/#search=background-size
Как видим префиксы уже пару лет неактуальны.

Ivanq

Вы скажите точнее, как нужно. У меня 3 варианта:

1. background-size: contain
Картинка показывается целиком, не искажаясь.
Пример

2. background-size: cover
Картинка заполняет все пространство, не искажаясь, но часть обрезается.
Пример

3. background-size: 100% 100%
Картинка заполняет все пространство, но искажается.
Пример

Источник

Адаптивное целое фоновое изображение с помощью CSS

От автора: В этой обучающей статье мы рассмотрим простую технику создания фонового изображения, которое будет полностью растягиваться на всю ширину окна просмотра (viewport) браузера. Для этого нам понадобится CSS-свойство background-size; JavaScript не нужен.

скачать исходникидемо

Примеры адаптивных целых фоновых изображений

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

Практический курс по верстке адаптивного сайта с нуля!

КАК СДЕЛАТЬ КАРТИНКУ ФОНОМ НА HTML | ФОН — ИЗОБРАЖЕНИЕ

Как отключить карту от Яндекс плюс карты сбербанка

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Базовые принципы

Вот наш план действий.

Используйте свойство background-size, чтобы полностью заполнить окно просмотра

CSS-свойство background-size имеет значение cover. Значение cover сообщает браузеру о том, что необходимо автоматически и пропорционально масштабировать ширину и высоту фонового изображения, чтобы они всегда были равны или были больше ширины/высоты окна просмотра.

Используйте медиа-запрос для обработки небольших фоновых изображений для мобильных устройств

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

Изображение, которое я использовал в демо-примере, имеет разрешение 5500x3600px. Этого разрешения хватит для большинства широкоформатных компьютерных мониторов, имеющихся в настоящее время в продаже. Но ради этого придется обрабатывать файл размером 1.7MB.

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

Источник
Рейтинг
Загрузка ...