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

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

  • автор:

Как сделать фоновую картинку на всю ширину?

Для изменения размеров фоновой картинки используется свойство background-size. Значение 100% масштабирует изображение на всю доступную ширину, при этом высота будет задана автоматически, исходя из пропорций картинки (пример 1).

Пример 1. Использование background-size

Результат данного примера показан на рис. 1. Обратите внимание, что по умолчанию картинка повторяется по вертикали. Если повторение запретить через background-repeat, то фоновая картинка будет занимать лишь часть веб-страницы.

Фоновая картинка на всю ширину

Рис. 1. Фоновая картинка на всю ширину веб-страницы

Часто также требуется ограничить высоту фона фиксированным значением, а ширину оставить 100%. Для этого используем свойство height для указания высоты, а для background-size пишем значение cover (пример 2).

Пример 2. Использование background-size

Ширина фона

Домашняя акула

Результат данного примера показан на рис. 2.

Фоновая картинка на всю ширину

Рис. 2. Фоновая картинка на всю ширину элемента

См. также

  • background-size
  • Анимация ссылок при наведении
  • Масштабирование фона
  • Несколько фоновых картинок
  • Установка фона и градиента

Как растянуть фон на всю ширину окна?

Растянуть фоновую картинку на всю ширину окна браузера с помощью CSS3.

Решение

Для масштабирования фона предназначено свойство background-size , в качестве его значения указывается 100%, тогда фон будет занимать всю ширину окна браузера. Для старых версий браузеров следует использовать специфические свойства с префиксами, как показано в примере 1.

Пример 1. Растягиваемый фон

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Растягиваемый фон    

Результат данного примера показан на рис. 1.

Вид фона при уменьшенном размере окна

Рис. 1. Вид фона при уменьшенном размере окна

При увеличении размера окна браузера фон также начнёт расширяться, это приведет к ухудшению вида картинки (рис. 2).

Вид фона при увеличенном размере окна

Рис. 2. Вид фона при увеличенном размере окна

CSS по теме

Статьи по теме

  • Как изменить размер фоновой картинки через CSS3
  • Как растянуть фон на всю ширину окна?
  • Масштабирование фона

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

  • Как добавить картинку на веб-страницу?
  • Как добавить иконку сайта в адресную строку браузера?
  • Как добавить фоновый рисунок на веб-страницу?
  • Как сделать обтекание картинки текстом?
  • Как растянуть фон на всю ширину окна?
  • Как выровнять фотографию по центру веб-страницы?
  • Как разместить элементы списка горизонтально?
  • Как убрать подчеркивание у ссылок?
  • Как убрать маркеры в маркированном списке?
  • Как изменить расстояние между строками текста?
  • Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
  • Как открыть ссылку в новом окне?

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

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

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

Комментировать
Решения вопроса 1

DENDIBAEV

Тыжпрограммист

background: url(image/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;

Ответ написан более трёх лет назад
Нравится 2 8 комментариев

DENDIBAEV

и без префиксов достаточно

space2pacman

Ярослав Иванов @space2pacman Куратор тега CSS
Арман Дендибаев: В чем разница между -webkit- и -o- ?

DENDIBAEV

Ярослав Иванов: Этот код не мой и старый я иногда юзаю этот метод

Ankhena

Ankhena @Ankhena Куратор тега CSS
Ярослав Иванов: webkit для webkit браузеров, -o- для старой оперы

delphinpro

Сергей delphinpro @delphinpro Куратор тега CSS

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

moneymakerXA @moneymakerXA Автор вопроса
Арман Дендибаев: Да, отлично, спасибо большое
Stanislav Yaroslavtsev @Stas_Yaroslavtsev
Не работает (
Ответы на вопрос 1

Ivanq

Знаю php, js, html, css

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

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

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

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

Как растянуть картинку на весь экран?

Если в пути к картинке содержатся пробелы — url(img/test image.jpg) — следует поступить, как предписывает данный комментарий. Спасибо.

2 мар 2016 в 7:27
Спасибо большое! Очень помогло
22 мая 2020 в 10:43
Отслеживать
ответ дан 2 апр 2012 в 14:58
Вячеслав Кириченко Вячеслав Кириченко
1,344 8 8 серебряных знаков 21 21 бронзовый знак
не сработает если реальная ширина картинки будет меньше ширины окна браузера.
2 апр 2012 в 15:09

Важно не забывать кавычки ставить: background: url(«img/image.jpg») , иначе на экранах с некоторым разрешением внизу может появляться «полоса»— опускается самая верхняя часть фоновой картинки.

Отслеживать
ответ дан 19 фев 2016 в 11:18
Саша Черных Саша Черных
4,316 14 14 золотых знаков 43 43 серебряных знака 93 93 бронзовых знака

Вы уверены? можно и без кавычек писать, это роли не играет, а чтобы фон не повторялся просто добавить нужно no-repeat

19 фев 2016 в 11:27

@soledar10, да, ибо таким образом лично разрешил проблему на своём сайте. Раньше нижняя часть его страниц выглядела на моём мониторе так: !1 !2 Если надо, могу html-страницы скинуть, проверьте на Screenfly с кавычками и без. Спасибо.

19 фев 2016 в 13:45
jsfiddle.net/soledar10/vLvrzh2x без разницы есть кавычки или нет
20 фев 2016 в 8:10

@soledar10, если изображение по ссылке, тоже не вижу изменений. Но если лежит в папке, похоже, кавычки приобретают значение: Отображение с кавычками / Отображение без кавычек / Код с кавычками / Код без кавычек / Спасибо.

20 фев 2016 в 12:51

Дело в том, что пробел не должен содержаться в адресе. Если он там есть, то помогает одно из следующих решений: 1. Честно заменить пробел на %20 . 2. Написать адрес в кавычках. 3. Экранировать пробел \ . В приведённых примерах фон с пробелом без кавычек вычёркивает всё css-свойство включая no-repeat center center fixed , однако, за счёт того, что у body есть устаревший атрибут background с той же картинкой, он всё же отображается. На самом деле, в нормальной ситуации фона в таком случае вообще не окажется.

1 мар 2016 в 16:14

Highly active question. Earn 10 reputation (not counting the association bonus) in order to answer this question. The reputation requirement helps protect this question from spam and non-answer activity.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *