Как растянуть изображение background на всю ширину в css

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

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

Решение

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

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

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

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

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

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

Контент по центру, фон по ширине

Частая задача вёрстки — центрировать контент, а фоны растягивать:

Фон у шапки, у плашки под шапкой, фон с травой, серый фон и фон подвала тянутся на всю ширину. Текст на мобильных отодвинут от краёв на 20px, на планшетах на 40px, а на десктопе занимает 900px и находится по центру. Большинство адаптивных сайтов сделано именно так:

• фон всегда по ширине страницы;
• на мобильных и планшетах есть отступы у контента (могут быть как в пикселях, так и в процентах);
• есть максимальная ширина, больше контент не должен быть.

Как это сделать? Если фон по ширине, то это фон какого-то блока, который тянется на всю ширину. Возьмём шапку. На мобильных и планшетах можно так:

На мобильных просто добавим паддинги. Посмотрите HTML и CSS в примере

Но как на десктопе сделать, чтобы контент не выходил за 900px? Паддинги уже не подойдут. Если ограничить header по ширине, то фон перестанет тянуться. Обернём содержимое шапки и ограничим обёртку. Расположим её по центру:

Для наглядности ограничу 500px

К header-wrapper добавится content-wrapper , footer-wraper и прочие врапперы. Поэтому я сразу делаю один блок — wrapper . Который только центрует контент. Больше ничего. Вот как:

• Отступы на мобильных;
• отступы побольше на планшетах;
• максимальная ширина и центровка марджинами.

На мобильных тянется. Ограничен по ширине, центруется

У вас сложная вёрстка, поэтому на мобильных и планшетах вы делаете фиксированную ширину? Не вопрос, просто зафиксируйте ширину на всех контрольных точках:

В Бутстрапе тоже есть блок, который центрует контент: container.

С любовью, ваш Капитан.

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

Background-size: масштабирование фонового рисунка

Когда вы добавляете фоновый рисунок через свойство background-image, то по умолчанию изображение отображается в своих реальных размерах. Это не всегда удобно, поэтому в CSS3 появилось новое свойство background-size для регулировки размера фонового изображения.

Значения background-size

Значения для свойства background-size можно задавать при помощи ключевых слов, а также в любых единицах измерения CSS. В одной записи можно указывать размеры как для одной, так и для двух сторон — горизонтальной и вертикальной (последовательность важна).

Ключевые слова

• auto (значение по умолчанию) — если данное значение установлено для горизонтали и вертикали, т. е.:

background-size: auto auto;

…то размеры фона останутся оригинальными. Если значение auto задано лишь для одной из сторон, то размер фона будет автоматически подогнан под пропорции изображения. Например, если записать следующее:

background-size: 250px auto;

…то высота фоновой картинки будет вычисляться автоматически.

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

cover — фоновое изображение масштабируется так, чтобы полностью заполнить пространство элемента, при этом сохраняя свои пропорции. Если пропорции элемента не соответствуют пропорциям изображения, это может привести к тому, что часть рисунка будет скрыта.

Числовые значения

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

Чтобы задать точную ширину и высоту, используйте два значения — первое для ширины, второе для высоты:

background-size: 300px 300px;

Учтите, что изображение может исказиться, если вы не попадете в его пропорции:

Чтобы сохранить пропорции фона, используйте для одной из сторон свойство auto :

Свойство background-size часто используется на практике. Например, его очень удобно использовать, когда размер элемента указан в процентах. Если задать блоку ширину 50% от ширины экрана, а его фону — ширину 100%, то при изменении размера окна фон всегда будет соответствовать ширине элемента.

Поддержка браузерами

Практически все используемые браузеры (как десктопные, так и мобильные) хорошо работают со свойством background-size. Internet Explorer понимает данное свойство, начиная с 9-й версии.

Далее в учебнике: пишем стиль для фона, используя сокращенную запись — «мульти»-свойство background.

Как растянуть SVG картинку только по высоте при фиксированной ширине

Тема справедлива так же для растягивания ширины при неизменной высоте. На самом деле задача немного специфичная, ведь зачем сознательно искажать картинку/иконку, тем не менее случаи бывают разные. В моем случае нужно было сделать блок, который при наличии контента растягивался бы по высоте и его “уголок” был адаптивным. Саму рабочую конструкцию вставлять не буду, т.к. запись не об этом, а о самом вопросе растягивания svg по одной из сторон, поэтому в качестве предполагаемого результат добавлю только изображение:

Кратко общими словами: конструкция состоит из прямоугольного div’a и svg – уголка справа. Так вот при первичном решении svg никак не удавалось растянуть исключительно по высоте, оставив фиксированную ширину. Решение нашлось в атрибуте:

preserveAspectRatio = «none»

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

See the Pen OvZJrP by Sergey (@norzserge) on CodePen.

Надеюсь, что моя запись натолкнет кого-нибудь на решение своей не тривиальной задачи. Всем удачи!

P.S. К слову сказать, до решения с растягиванием SVG были предприняты попытки:
– добавить блок с background картинкой-уголком, но при растягивании бэкграунда, картинка заметно искажалась – fail
– нарисовать в background этот треугольник градиентом, но при растягивании сторона треугольника превращалась в лесенку – fail
– вариант с псевдо элементами подходит только при фиксированной высоте блока, в котором находится контент, так что тоже не прокатило
– еще пара извращений, о которых даже писать не хочу

В общем самым действенным оказалось использование svg с атрибутом preserveAspectRatio=”none”