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

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

  • автор:

Сделать фоновое изображение по центру и на весь экран

Макет

Как сделать фоновое изображение по центру и на весь экран. И чтобы контент был посередине, как у хедера? Сначала у меня получись это сделать, но изображение двигалось вместе с контентом.. Так не надо. Нужно чтобы изображение было по центру и на весь экран. Нужно чтобы контент был по центру, как у хедера.. Как это реализовать? Макет прикрепляю.

@font-face < font-family: 'Roboto Slab'; src: url('../fonts/RobotoSlabBold.eot'); /* IE9 Compat Modes */ src: url('../fonts/RobotoSlabBold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/RobotoSlabBold.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/RobotoSlabBold.woff') format('woff'), /* Pretty Modern Browsers */ url('../fonts/RobotoSlabBold.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/RobotoSlabBold.svg#svgFontName') format('svg'); /* Legacy iOS */ >body < padding: 0; margin: 0; font-family: 'Roboto Slab'; font-size: 15px; font-weight: normal; width: 100%; >/* Header*/ header < width: 1350px; height: 100px; margin: 0px auto; >header li < display: inline-block; margin-top: 20px; >header a < text-decoration: none; >.header__feedback < float: right; width: 200px; height: 80px; font-size: 21px; font-weight: bold; margin-top: 10px; >.header__logo < display: inline-block; float: left; margin-top: 10px; >.header__menu_list < display: inline-block; >.header__feedback_icon img < width: 20px; float: left; margin-top: 9px; margin-left: 4px; >.header__feedback_items < font-size: 14px; width: 156px; height: 38px; border: 1px solid #2f1059; border-radius: 5px; line-height: 38px; margin-top: 8px; margin-left: 25px; >.header__feedback_button a < font-size: 14px; font-weight: bold; >.header__feedback_number < color: #2f1059; >.header__menu_list_item1 < margin-left: 50px; >.header__menu_list_item2, .header__menu_list_item3, .header__menu_list_item4, .header__menu_list_item5 < margin-left: 20px; >/* Header END*/ /* Section1*/ section < width: 1350px; height: 655px; margin: 0 auto; >.section1 < background: url('../img/background.jpg') no-repeat center top scroll; min-height: 655px; >.section1__heading_paragraph_up < font-size: 22px; font-weight: normal; >.section1__heading h1

Тренировка
Дом готов идет внутренняя отделка. Срок сдачи: Февраль 2016

Ваша квартира в новостройке ждет вас

Уютные квартиры в центре города и в 5 минутых от р. Волга

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

Растянуть фоновую картинку на всю ширину окна браузера с помощью 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-size. Значение 100% масштабирует изображение на всю доступную ширину, при этом высота будет задана автоматически, исходя из пропорций картинки (пример 1).

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

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

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

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

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

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

Ширина фона

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

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

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

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

См. также

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

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

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

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

Комментировать
Решения вопроса 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%
Картинка заполняет все пространство, но искажается.
Пример

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

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