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

Как сделать фоновое изображение в css

  • автор:

Background-image: установка фонового изображения

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

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

В данном уроке мы познакомим вас с одним из нескольких свойств, отвечающих за настройку фона в CSS — это свойство background-image . В следующих уроках мы рассмотрим остальные свойства, а также сокращенную запись background.

Возможности свойства CSS background-image

Свойство background-image устанавливает выбранное изображение в качестве фона элемента. В зависимости от цели, можно задать графический фон как для отдельного блока, так и для всей страницы. В качестве единственного значения принимается URL-адрес графического файла. Запись выглядит так:

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

Фон картинкой в CSS

Всем привет:) Не могу фон сделать под размер страницы, постоянно фон как бы не помещается на страницу. Все говорят про background-size: cover; Но он у меня никогда нормально не работал. Так же пробовал задавать высоту и ширину родительскому блоку, width: 100%; width: 1920px; . Так же работает не так как нужно. Единственное что мне нравится так это background-size: contain; Но при уменьшении страницы он уменьшает высоту. Готов выслушать вашу критику:)

.block-advantage-price < background: #0b2f58 url("https://yapx.ru/v/F3BQX") no-repeat top center fixed; -webkit-background-size: contain; -moz-background-size: contain; -o-background-size: contain; background-size: 100% 100%; background-position: 50% 50%; color: #fff; font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; >
 

Ищите конкретную деталь?

Если у Вас есть артикул - введите его в поле ниже и получите цену
ПРЯМО СЕЙЧАС!

-[0-9]" title="Введите ваш номер телефона" required>

Мы перезвоним вам в течении 3 минут и назовем цену детали!

Или вы можете перезвонить нам сами:

+7 (XX8) 2XX-X7-X5

Примеры (Прошу прошение за качество): Как должно выглядеть Рисунок 1 — Как должен выглядеть фон При background-size: cover; Рисунок 2 — При background-size: cover При background-size: contain Рисунок 3 — При background-size: containПри background-size: 100% 100%; Рисунок 4 — При background-size: 100% 100% Как видим по ширине адекватно отображается только background-size: contain; Но по высоте работает не корректно.

152. Свойство background для работы с фоном

Свойство background предназначено для установки различных характеристик фона. Порядок установки значений не важен, так как это определяет сам браузер. Есть возможность указывать несколько фонов сразу, путем перечисления их через запятую. Свойство background является сокращенным, так как в нем, для сокращения кода, можно указывать несколько свойств. Его синтаксис:

background: значение1 значение 2 . значениеN; 

Далее приведем реальный пример:

background: #000000 url("img.jpg") no-repeat left bottom; 

Рассмотрим специальные свойства:

  1. background-attachment
  2. background-blend-mode
  3. background-clip
  4. background-color
  5. background-image
  6. background-origin
  7. background-position
  8. background-repeat
  9. background-size

Свойство background-color для установки фонового цвета

Для обозначения фонового цвета элемента используется свойство background-color . По умолчанию все элементы имеют прозрачный фон. Рассмотрим синтаксис:

background-color: цвет | transparent; 

Значение transparent устанавливает прозрачный фон. Под понятием «цвет» может быть запись цвета в допустимом формате для CSS. Допустимыми форматами являются: шестнадцатеричный код, название цвета, RGB, RGBA, HSL, HSLA. Далее пример, где используется три формата записи черного цвета:

div background-color: #000;
>
div background-color: rgb(0, 0, 0);
>
div background-color: black;
>

Свойство background-image для установки фонового изображения

Свойство background-image используется для установки фонового изображения. Позволительно устанавливать несколько изображений фона, перечисляя их через запятую. Если установлен цвет фона при помощи свойства background-color , то он (цвет) будет отображаться до тех пор, пока загружается фоновое изображение или в случае его недоступности. Рассмотрим синтаксис:

background-image: url|none; 

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

  1. url – URL-адрес изображения. Чтобы указать несколько изображений, разделите URL-адреса запятой;
  2. none – фоновое изображение не будет отображаться. Оно по умолчанию;
  3. linear-gradient() – устанавливает линейный градиент в качестве фона. Определите как минимум два цвета (сверху вниз);
  4. radial-gradient() – устанавливает радиальный градиент в качестве фонового изображения. Определите как минимум два цвета (от центра до краев);
  5. repeating-linear-gradient() – повторяет линейный градиент;
  6. repeating-radial-gradient() – повторяет радиальный градиент.
body background-image: url("bg.jpg");
>

Свойство background-attachment устанавливает прокрутку фона

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

background-attachment: fixed | local | scroll | initial | inherit; 

Как видно из вышеприведенного кода, данное свойство имеет пять значений. Что они означают:

  1. scroll – фоновое изображение будет прокручиваться вместе со страницей. Оно установлено по умолчанию.
  2. fixed – фоновое изображение не будет прокручиваться вместе со страницей.
  3. local – фоновое изображение будет прокручиваться вместе с содержимым элемента.
  4. initial – устанавливается значение по умолчанию.
  5. inherit – наследует значение свойства родителя.
 
Какой-то текста
body background-image: url("bg.png"); /* Путь к изображению, которое используется для фона*/ 
background-attachment: fixed; /* Фон прокручиваться не будет */
>

Свойство background-blend-mode определяет режим наложения фонового изображения

Определяет, как будет накладываться одно фоновое изображение, на другое или на фоновый цвет. То есть, первым задается какой-то фон, при помощи свойства background-image , вторым задается фоновое изображение, для которого мы определяем стиль наложения. Позволительно указывать несколько фоновых изображений, т.е. больше двух при помощи background-image и в background-blend-mode использовать ряд значений, перечисленных через запятую. Стоит обратить внимание на версии браузеров, с которых начинается поддержка свойства background-blend-mode , например, Internet Explorer не поддерживает его вовсе. Рассмотрим синтаксис:

background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity;

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

  1. normal – Обычный. Режим по умолчанию.
  2. multiply – Умножение.
  3. screen – Осветление.
  4. overlay – Перекрытие.
  5. darken – Темнее.
  6. lighten – Светлее.
  7. color-dodge – Осветление основы.
  8. color-burn – Затемнение основы.
  9. hard-light – Направленный свет.
  10. soft-light – Рассеянный свет.
  11. difference – Разница.
  12. exclusion – Исключение.
  13. hue – Тон.
  14. saturation – Насыщенность.
  15. color – Цвет.
  16. luminosity – Яркость.

Далее пример использования свойства:

div < 
width: 500px;
height: 500px;
background-image: url("bg.jpg"), url("superimposed.png");
background-blend-mode: darken;
>

Свойство background-clip определяет отображение фона под границами

Фон может отображаться под границами, внутри их или внутри контента. Чтобы это реализовать, необходимо использовать свойство background-clip . Как ранее было обозначено, оно принимает три значения:

  1. border-box – фон будет отображаться под рамкой;
  2. padding-box – фон будет отображаться внутри рамки;
  3. content-box – фон будет отображаться внутри контента.

Синтаксис свойства background-clip :

background-clip: [border-box |padding-box | content-box]; 

Далее рассмотрим наглядный пример использования свойства background-clip :

.clip background: #f1f1f1; 
border: 20px dotted #000000;
background-clip: border-box;
padding: 10px;
height: 50px;
>

Свойство background-origin для позиционирования фона

С помощью свойства background-origin можно позиционировать фон, при этом свойство background-attachment не должно иметь значение fixed . Значения, которые принимает background-origin :

  1. border-box – позиционирование фона осуществляется относительно границы;
  2. padding-box – позиционирование фона осуществляется относительно края элемента, при чем толщина границы учитывается;
  3. content-box – позиционирование фона осуществляется относительно содержимого элемента;

Синтаксис свойства background-origin :

background-origin: [border-box |padding-box | content-box]; 
.origin background: url("img.jpg") no-repeat; 
background-origin: content-box;
border: 10px solid #000;
padding: 10px;
height: 100px;
>

Свойство background-position для определения начального положения фона

С помощью свойства background-position достаточно просто устанавливается начальное положение фона. Это свойство имеет два значения, которые могут быть заданы ключевым словом, в процентах или в иных значениях допустимых в CSS. Первое значение определяет положение по горизонтали ( left , center , right ), второе – по вертикали ( top , center , bottom ). Через запятую можно указывать значения для нескольких фонов. Синтаксис свойства background-position следующий:

background-position: значение1 значение2; 

При указании одного ключевого слова, второе будет равно center. Комбинации ключевых слов могут быть следующими:

  1. left top
  2. left center
  3. left bottom
  4. right top
  5. right center
  6. right bottom
  7. center top
  8. center center
  9. center bottom
body background-image: url(bg.jpg); 
background-position: 50% 50%;
>

Свойство background-repeat устанавливает повторение фона

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

background-repeat: значение; 

Свойство background-repeat принимает 6 значений:

  1. repeat – Фоновое изображение повторяется как по вертикали, так и по горизонтали. Последнее изображение будет обрезано, если оно не помещается. Это по умолчанию;
  2. repeat-x – Фоновое изображение повторяется только по горизонтали;
  3. repeat-y – Фоновое изображение повторяется только по вертикали;
  4. no-repeat – Фоновое изображение не повторяется. Изображение будет показано только один раз;
  5. space – Фоновое изображение повторяется в максимально возможной степени без отсечения. При необходимости добавляются свободные пространства между изображениями;
  6. round – Фоновое изображение повторяется и сжимается или растягивается, чтобы заполнить пространство (без пропусков);
body < 
background-image: url(bg.jpg);
background-repeat: repeat;
>

Свойство background-size определяет размер фонового изображения

Для установки размера фонового изображения используется свойство background-size . Оно может принимать как два, так и одно значение. Первое значение указывается для ширины, второе для высоты. Если указано только одно значение, то второе значение (высота) принимает значение auto . Синтаксис:

background-size: значение1 значение2; 

Значения могут задаваться в любых разрешенных в CSS единицах, процентах и ключевыми словами:

  1. cover – размеры изображения изменяются таким образом, чтобы сохранялись пропорции, ширина или высота равнялась размерам блока;
  2. contain – размеры изображения изменяются таким образом, чтобы сохранялись пропорции, и изображение полностью поместилось в блок;
  3. auto – например, если первое значение равно 200px, а второе auto, то высота изображения будет вычисляться автоматически с сохранением пропорций.
div background: url(bg.jpg); 
background-size: cover;
>

Заключение

Свойство background и его частные случаи одно из самых применяемых. Если у вас возникнет необходимость добавить фон для любого элемента HTML, то вы точно столкнетесь с использованием этого свойства.

CSS и множественный фон

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

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

Если вы не знакомы с CSS-свойством background — хорошо будет, если вы, перед чтением материала, заглянете на эту страницу документации MDN, посвящённую данному свойству.

Введение

CSS-свойство background — это сокращённое свойство, которое позволяет настраивать следующие обычные свойства элементов:

  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-repeat
  • background-size
  • background-attachment

Рассмотрим следующий пример:

.element < background: url(cool.jpg) top left/50px 50px no-repeat; >

Начальная позиция фонового изображения находится в верхнем левом углу элемента. Размер изображения составляет 50px * 50px . При настройке свойства background важно помнить о порядке следования свойств, задающих позицию и размер фонового изображения.

Путь к изображению, его позиция и его размер

На предыдущем рисунке за значениями, относящимися к настройке свойства background-position , идут значения свойства background-size . Если разместить эти значения в другом порядке, мы получим неправильно оформленный CSS-код. Например — такой:

.element < /* Осторожно: неправильный CSS */ background: url(cool.jpg) 50px 50px/top left no-repeat; >

Позиция фонового изображения

Для настройки области расположения фона, исходной позиции фонового изображения, используется свойство background-origin . Мне нравится та гибкость, которую даёт свойство background-position . Оно позволяет позиционировать фон элементов разными способами:

  • Ключевые слова ( top , right , bottom , left , center ).
  • Процентные значения. Например: 50% .
  • Значения, задающие некие расстояния. Например: 20px 2.5rem .
  • Значения, представляющие собой отступы от краёв элемента. Например: top 20px left 10px .

Система координат

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

Стоит отметить то, что значение top left — это то же самое, что и значение left top . Браузер достаточно интеллектуален для того чтобы определить то, какая часть этого значения относится к оси X, а какая — к оси Y.

Конструкции вида top left и left top равнозначны

.element < background: url(cool.jpg) top left/50px 50px no-repeat; /* Это - то же самое, что и следующее */ background: url(cool.jpg) left top/50px 50px no-repeat; >

Размер фонового изображения

Имя свойства, задающего размер фонового изображения, background-size , однозначно указывает на роль этого свойства. Размер фонового изображения — это его ширина и высота. При настройке этого свойства нужно учитывать то, что первое значение представляет ширину, а второе — высоту.

Сначала идёт ширина, а потом — высота

Если ширина и высота фонового изображения являются одинаковыми, это значит, что у нас нет необходимости указывать два значения для background-size . В такой ситуации достаточно указать одно значение.

Тут, кстати, нелишним будет упомянуть о том, что в спецификации CSS по этому поводу сказано следующее: «Если указано лишь одно значение, то предполагается, что второе значение — это auto». Но этот механизм в браузерах не реализован, хотя в будущем ситуация может измениться. Благодарю Илью Стрельцына за то, что привлёк моё внимание к этой детали.

Одно значение задаёт и ширину, и высоту

Теперь, когда мы поговорили об основах использования свойства background , давайте поговорим о том, как работать с несколькими фонами.

Множественный фон

В свойстве background может быть описан один слой фона, до сих пор мы видели именно такие описания, или — несколько слоёв, свойства которых разделены запятой. Если размеры нескольких фоновых изображений одинаковы, одно из них полностью перекроет другие.

.element < background: url(cool.jpg) top left/50px 50px no-repeat, url(cool.jpg) center/50px 50px no-repeat; >

Использование нескольких фоновых изображений

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

Порядок наложения фоновых изображений друг на друга

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

.hero < min-height: 350px; background: url('table.jpg') center/cover no-repeat, url('konafa.svg') center/50px no-repeat; >

Здесь у нас имеется изображение стола ( table.jpg ) и изображение тарелки ( konafa.svg ). Как вы думаете, какое из этих фоновых изображений будет выведено первым? Изображение стола или изображение тарелки?

Элемент с двумя фоновыми изображениями

Правильный ответ на этот вопрос заключается в том, что первым будет изображение стола. В CSS фон, описанный первым, накладывается на второй фон, второй фон накладывается на третий и так далее. Изменение порядка описания фонов влияет на их вывод в элементе.

.hero < background: url('konafa.svg') center/50px no-repeat, url('table.jpg') center/cover no-repeat; >

Первый фон накладывается на второй

Как видите, фон, заданный первым, находится выше фона, заданного вторым.

Сплошные цвета

Предположим, нам, используя CSS-инструменты настройки фона элемента, нужно сформировать одноцветный фон. Как это сделать? Это, благодаря CSS-градиентам, совсем несложная задача. Дело в том, что если воспользоваться функцией linear-gradient с одинаковыми стоп-цветами, это приведёт к появлению сплошного цвета.

.hero

Фон, созданный с помощью linear-gradient и одинаковых стоп-цветов

Тут мы привели простейший пример использования градиента при настройке фона, но градиенты, на самом деле, можно использовать для создания очень интересных и полезных эффектов.

Сценарии использования и практические примеры

▍Затемнение фонового изображения

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

.hero < background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)), url("landscape.jpg") center/cover; >

Затемнённое фоновое изображение

Ещё интереснее то, что тот же метод можно использовать для тонирования фонового изображения элементов.

.hero < background: linear-gradient(135deg, rgba(177, 234, 77, 0.25), rgba(69, 149, 34, 0.25), url("landscape.jpg") center/cover; >

Тонированный фон

▍Рисование средствами CSS

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

Изображение ноутбука

Давайте разберём это изображение и подумаем о том, какие градиенты нам понадобятся.

Пластиковая рамка дисплея, LCD-дисплей, отражение, скруглённые края корпуса, корпус

Обратите внимание на то, что когда ноутбук «разобран», гораздо легче разобраться в том, какие градиенты нужны для того чтобы его нарисовать с использованием техники применения нескольких фоновых изображений. Возможно, вы заметили то, что я использовал пару окружностей, играющих роль скруглённых углов корпуса ноутбука. Дело в том, что стандартного способа создания градиентов со скруглёнными углами не существует.

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

:root

Итак, градиенты мы описали и задали их размеры. Теперь поразмышляем над их позиционированием. Решение этой задачи облегчит схематичное изображение ноутбука, приведённое ниже.

Схематичное изображение ноутбука

Реализация отражения света от рамки дисплея ноутбука

Как уже было сказано, слой фона, который должен располагаться над всеми остальными слоями, должен быть определён первым. В нашем случае первым градиентом будет тот, который имитирует отражение света от рамки дисплея ноутбука.

Отражение света от рамки дисплея ноутбука

LCD-дисплей

Дисплей ноутбука выровнен по центру оси X, а по оси Y он расположен со сдвигом в 6 пикселей от начала координат.

Дисплей ноутбука

Рамка дисплея

Рамка находится ниже дисплея, она центрирована по оси X, по оси Y она расположена со смещением в 0px от начала координат.

Рамка дисплея

Корпус ноутбука

А это — самый интересный элемент. Для начала, надо учесть то, что элемент, представляющий корпус ноутбука, является прямоугольником, и то, что корпус имеет скруглённые края. Это достигается благодаря использованию пары окружностей.

Корпус ноутбука

Готовый рисунок
:root < --case: linear-gradient(#222, #222); --case-size: 152px 103px; --case-pos: center 0; --display: linear-gradient(#fff, #fff); --display-size: 137px 87px; --display-pos: center 6px; --reflection: linear-gradient(205deg, #fff, rgba(255, 255, 255, 0)); --reflection-size: 78px 78px; --reflection-pos: top right; --body: linear-gradient(#888, #888); --body-size: 182px 9px; --body-pos: center bottom; --circle: radial-gradient(9px 9px at 5px 5.5px, #888 50%, transparent 50%); --circle-size: 10px 10px; --circle-left-pos: left bottom; --circle-right-pos: right bottom; >.cool < width: 190px; height: 112px; background-image: var(--reflection), var(--display), var(--case), var(--circle), var(--circle), var(--body); background-size: var(--reflection-size), var(--display-size), var(--case-size), var(--circle-size), var(--circle-size), var(--body-size); background-position: var(--reflection-pos), var(--display-pos), var(--case-pos), var(--circle-left-pos), var(--circle-right-pos), var(--body-pos); background-repeat: no-repeat; /*outline: solid 1px;*/ >

Вот CodePen-проект, с которым вы можете поэкспериментировать.

▍Смешивание нескольких фонов

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

Цветное изображение и вспомогательный слой чёрного цвета

Обратите внимание на то, что в следующем фрагменте CSS-кода используется свойство background-blend-mode: color . Именно оно и позволяет достичь нужного эффекта

.hero < background: linear-gradient(#000, #000), url("landscape.jpg") center/cover; background-blend-mode: color; >

Обесцвеченное изображение

Пользуетесь ли вы множественными фонами в CSS?

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

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