How To Add Background Image In CSS
The background-image property is used to set the background image of an element. You can select any valid HTML elements like div, p, article, section, or entire body to set a background image.
To start with, let’s create a folder named image where you can store all the images you want to use on your website. We are going to use seashells.jpg as our background image.
To set background image select the element using CSS and add the following code:
Code Explanation:
- section is the tag name of the element where you want to set a background image.
- The background-image is the CSS property used to set the background image.
- The url function is used to set the image file path.
- The image/seashells.jpg is the relative path of the image file. You can also set an absolute path like http://example.com/image/seashells.jpg.
- Image URL will work even without any quote but it is a good practice to put the URL inside single or double-quotes.
Output:
Background Image To Entire Body
You can also set the background image to the entire body of the website. To do this select the body element and add the following code:
Output:
Значения background-position
В качестве значений могут выступать как специальные ключевые слова, так и числовые значения в единицах измерения CSS — процентах, пикселях и т. д.
Ключевые слова для горизонтального позиционирования
- — фоновый рисунок прилеплен к левой стороне элемента;
- — фоновый рисунок расположен в центре оси x;
- — фоновый рисунок прилеплен к правой стороне элемента.
div {
background-position-x: left;
}
Ключевые слова для вертикального позиционирования
- — фоновый рисунок прилеплен к верхней стороне элемента;
- — фоновый рисунок расположен в центре оси y;
- — фоновый рисунок прилеплен к нижней стороне элемента.
div {
background-position-y: bottom;
}
Сокращенная запись для двух осей
Часто позиционирование фона задается сразу для двух осей. Для этого удобно пользоваться сокращенной записью, т. е. свойством background-position. Оно принимает одно либо два значения (для позиционирования сразу по двум осям либо по каждой отдельно соответственно).
Ниже — различные примеры позиционирования фона с помощью ключевых слов:
background-position: top center; /* фон вверху по центру */ background-position: top right; /* фон в верхнем правом углу */ background-position: bottom left; /* фон в левом нижнем углу */ background-position: center right; /* фон справа по центру */
Значения можно менять местами — они будут работать так же.
Примеры выравнивания фона с помощью background-position
Если вы установили повтор фона с помощью свойства , то будет определять, от какой точки будет начинаться дублирование изображения.
Для позиционирования фона можно использовать и одно значение для двух осей сразу:
background-position: center; /* фон по центру */ background-position: left; /* фон слева по центру */ background-position: right; /* фон справа по центру */ background-position: top; /* фон вверху по центру */ background-position: bottom; /* фон внизу по центру */
Точные значения в единицах измерения CSS
Вы можете управлять расстоянием фона от левого и верхнего краев элемента с помощью точных значений, указанных в единицах измерения CSS (например, в пикселях либо em). Пример:
div {
background-position: 10px 25px;
}
Такая запись означает, что фон удален от левого края на 10 пикселей и от верхнего края на 25 пикселей. Здесь важен порядок записи значений: первое значение отвечает за положение фонового рисунка по горизонтали, второе — по вертикали. Допустимы и отрицательные значения (например, они могут быть полезны в случае, если с левой или верхней стороны фоновой картинки есть область, которую необходимо спрятать).
Регулировать расстояние фона, отталкиваясь от правой или нижней стороны элемента, можно с помощью специального значения, которое записывается так:
div {
background-position: right 15px bottom 40px;
}
Здесь ключевые слова и говорят браузеру, что вы хотите делать отсчет от правой и нижней стороны. Следом за каждым из ключевых слов записывается желаемое значение. Так, — это расстояние между фоном и правой стороной элемента, а — расстояние между фоном и нижней стороной элемента.
Процентные значения
Большое удобство предоставляет возможность записи значений в процентах. Расстояние вычисляется, исходя из размеров элемента с заданным фоном. Допустимы отрицательные процентные значения, но результат здесь может быть неожиданным.
Лучший способ понять, как перемещается фон под управлением процентных значений — это попрактиковаться. А пока что покажем несколько примеров позиционирования фона через проценты:
Обратите внимание: значение идеально центрирует фоновое изображение (как по вертикали, так и по горизонтали), поскольку точка центра устанавливается в середине фона, а не в его начале или конце
Комбинирование значений
Да, вы можете записывать для каждой из осей свое значение в необходимых единицах измерения (либо используя ключевое слово). Комбинируйте точные значения с относительными, ключевые слова со значениями в единицах измерения — полная свобода действий. Примеры:
Примеры
Пример
Как расположить фоновое изображение по центру сверху:
body
{
background-image: url(‘w3css.gif’);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
}
Пример
Как расположить фоновое изображение, чтобы быть внизу справа:
body
{
background-image: url(‘w3css.gif’);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
}
Пример
Как расположить фоновое изображение с помощью процента:
body
{
background-image: url(‘w3css.gif’);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}
Пример
Как расположить фоновое изображение с помощью пикселей:
body
{
background-image: url(‘w3css.gif’);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 150px;
}
Позиционирование фонового рисунка
Указать начальное положение фонового рисунка позволяет свойство , которое появилось в стандарте CSS1 (). Свойство может применяться только к блочным элементам и не наследуется потомками.
Примечание: Начальное положение рисунка — это положение, в котором рисунок будет находиться при отключенном повторении, и, самое главное, это положение, откуда начнётся повторение, если его включить. Другими словами, от этого положения зависит то, с какой стороны будут обрезаться неубирающиеся фрагменты фоновой картинки в режиме .
Начальное положение фонового рисунка отсчитывается от левого верхнего угла элемента и может быть задано в процентах, пикселах и других единицах длины, принятых в CSS. Для указания крайних положений можно использовать ключевые слова , , , , а для указания положения в центре элемента — ключевое слово .
Если положение задаётся с помощью двух значений в процентах, пикселах или других CSS-единицах, то первое из этих значений будет определять смещение начального положения рисунка по горизонтали, второе — его смещение по вертикали, например:
Примечание: Расчёт смещения в процентах несколько отличается от расчета смещения в пикселах и других единицах длины.
Если при указании начального положения картинка используется ключевое слово, то назначение второго значения будет определяться этим ключевым словом. Порядок следования значений в этом случае не важен. Если в свойстве, например, используется слово (соответствует смещению 0% по горизонтали), то второе значение, независимо от того, где оно записано, будет определять смещение по вертикали.
Соотношение между используемыми ключевыми словами и процентной записью следующее:
- (позиция в левом верхнем углу; является начальным положением по умолчанию);
- (позиция по центру вверху);
- (позиция в правом верхнем углу);
- (позиция по левому краю и по центру);
- (позиция по центру);
- (позиция по правому краю и по центру);
- (позиция в левом нижнем углу);
- (позиция по центру внизу);
- (позиция в правом нижнем углу).
Если в свойстве указано только одно значение (спецификация допускает такой синтаксис), то вторым значением по умолчанию будет считаться (или ). Причём, если это единственное значение указано в процентах, пикселах или других CSS-единицах, то оно определяет величину смещения начального положения рисунка по горизонтали. Если же это единственное значение является ключевым словом, то направление смещения определяется этим ключевым словом.
Пример использования свойства :
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<style>
body {
background-image: url('images/bg.jpg');
background-color: #c7b39b;
background-repeat: repeat-y;
background-position: 20px 0;
padding-left: 20px;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor</h1>
<p> Lorem ipsum dolor sit
amet, consectetuer adipiscing elit, sed diem nonummy
nibh euismod tincidunt ut lacreet dolore magna aliguam
erat volutpat.</p>
<p> Duis te feugifacilisi. Duis autem dolor
in hendrerit in vulputate velit esse molestie consequat,
vel illum.</p>
</body>
</html>
Результат в браузере:
Размер изображения
В предыдущих примерах размер изображения и его позиция определялась браузером. По умолчанию размер изображения равняется оригинальному размеру из файла, а его позиция фиксируется в левом верхнем углу блока.
Однако не всегда мы можем угадать, какого размера нужно изображение. Это зависит от множества факторов, например:
- Разрешение экрана пользователя
- Адаптивность проекта
- Интерактивность, когда пользователь может взаимодействовать со страницей и от этого меняются некоторые ее части
При таких условиях может понадобиться одно изображение, которое, в то же время, будет подстраиваться по размеру под «реалии» страницы. Для этого существует свойство , которое принимает два значения:
- Ширина изображения
- Высота изображения
Если будет указана только ширина, то высота подстроится автоматически, сохраняя пропорции изображения. Такой вариант используется чаще всего. В качестве значения свойства можно использовать все изученные единицы измерения
В этом примере очень важно перейти на сам CodePen и попробовать разные размеры ширины браузера
Обратим внимание на размеры левого изображения — оно всегда будет занимать 30% от ширины блока, даже если изображение выходит за границы блока. При этом всегда сохраняются исходные пропорции
Правое изображение имеет фиксированные значения, которые не будут меняться при изменении ширины страницы.
Свойство имеет два зарезервированных значения:
- — Изображение масштабируется так, чтобы занять весь блок. В этом случае изображение может быть обрезано
- — Изображение масштабируется так, чтобы максимально покрыть область блока, но не обрезать само изображение
Такие значения можно встретить при создании верхних секций на сайте, где есть фоновое изображение на всю ширину экрана
Важно: при создании страниц и добавлении фоновых изображений важно следить, чтобы исходное изображение имело достаточное разрешение. При попытке растянуть небольшое изображение мы увидим пикселизованную картинку, что не добавляет странице привлекательности. Еще одно свойство, которое влияет на размер изображения —
Его действие похоже на свойство , которое отвечает за то, как браузер обрабатывает внутренние отступы и границы блока
Еще одно свойство, которое влияет на размер изображения — . Его действие похоже на свойство , которое отвечает за то, как браузер обрабатывает внутренние отступы и границы блока.
Свойство определяет, будет ли фоновое изображение располагаться на внутренних отступах или границах. Свойство принимает одно из значений:
- — фоновое изображение рисуется на всем блоке, включая внутренние отступы и границы
- — значение по умолчанию. Фоновое изображение рисуется в области блока и его внутренних отступов, но не учитывается размер границ, заданных свойством
- — фоновое изображение рисуется не по всему блоку, а по области контента внутри него
Взглянем на пример:
Видно, что изображения все равно накладываются на границы, например при значении , хотя ожидался другой эффект. Этот выход на границы связан с тем, что браузер не обрезает изображения, а граница не является сплошной.
Здесь поможет свойство , задача которого — точно определить, как обрезать изображение при его выходе за пределы блока. Как и , свойство принимает одно из трех значений:
- — обрезать по внешним границам элемента
- — обрезать по границам внутренних отступов
- — обрезать по границам контента
Еще одно значение — , которое до сих пор является экспериментальным, и предполагает обрезку изображения по границам текста. Со временем поддержка станет полной и значение можно будет использовать без опасения. Оно добавлено в пример, но может сработать некорректно в другом окружении.
Важно: свойство влияет не только на фоновое изображение, но и на фоновый цвет, установленный с помощью свойства
Иконка соцсети без текста
Почти на любом сайте есть блок со ссылками на Facebook*, «ВКонтакте», Instagram* и другие соцсети:
Поскольку это иконки, а текста (контентной составляющей) мы рядом не видим, — нужно использовать CSS.
Здесь есть пара нюансов:
- Раз текста нет, то у ссылки нет размеров. А фона без размеров не бывает (нельзя покрасить стену, когда самой стены нет).
- Если мы зададим размеры ссылке, то они не сработают, так как по умолчанию ссылка — строчный элемент (его размер не изменить с помощью свойств width и height).
Обойдём эти ограничения.
Сперва напишем простую разметку — список ссылок. Классы сделаем по БЭМ, чтобы наш компонент было удобно стилизовать и использовать повторно.
Начнём, конечно, с HTML-кода:
Далее — CSS:
- Заметьте, что свойству display для ссылок мы задали значение inline-block. Поэтому наши ссылки стали строчно-блочными элементами. Теперь можно задать им ширину и высоту — и это уже сработает.
- Одинаковые для всех элементов стили (background-position, background-size, background-repeat) мы вынесли в общий класс social__link.
- А вот фоновые изображения у нас разные — их мы задаём в разных классах.
Create Scrolling or Fixed Background Image
The background-attachment property is used to set the way the background image will scroll or fixed with respect to the element. By default, the background image will scroll with the element.
There are 2 different values that you can use with the background-attachment property scroll and fixed.
Here is an example that shows the difference between scroll and fixed value of background-attachment.
Example
Parallax Effect
Using the background-attachment property, you can create a parallax effect on the background image which looks really cool. You must have seen the parallax effect on some websites. Here is an example of the parallax effect.
Example
background-size
Хотя фон может быть любого размера, вы можете контролировать его размер на своей странице, как горизонтальный, так и вертикальный.
Значения могут быть как в процентной записи, так и в пикселах. Первое — горизонтальный размер, второе — вертикальный. Отрицательные значения не допускаются, имейте ввиду.
|
1 2 3 |
Если указано только одно значение — второе считается по умолчанию (auto или 100%, если это возможно).
Также, можно указать еще два значения, которые будут регулировать размер фонового изображения:
- contain. Масштабирует изображение, сохраняя пропорции, по длинной стороне, для максимального заполнения
- cover. Тоже самое, но масштабирует по короткой стороне.
Percentage values
When using percentage values, the reference is different from when you use pixel values; it’s no longer the top/left corner:
In this case, we need to consider two parameters: the size of the container AND the size of the image. Here is an illustration of how it works (I took a equal to ):
First, we consider the image to find the reference point we will use to place the image. It’s the point inside the image that is positioned at from the top/left corner considering the size of the image (like defined with the green lines). Then, we place that point inside the container at from the top/left corner considering the size of the container.
From this logic, we can identify some trivial cases like
(center) (bottom right) (top right)
Here is the full list of the common values and their equivalence:
- = = =
- = = =
- = = =
- = = =
- = =
- = =
- = =
- = =
- = =
Now it’s clear that if the size of the image is equal to the size of the container then nothing will happen when using percentage values simply because all the positions are equivalent. The top/left of the image is already at the top/left () of the container, the center is already at the center (), etc.
The first gold rule when using percentage values is: the size of the image needs to be different from the size of the container
What about gradients?
The above logic is the same when applied to gradients since gradients are considered images, and by default, if you don’t specify a , a gradient’s size will be the size of its container, unlike when using an image. This is the main issue that every developer faces when dealing with gradients.
If we refer to of the , we can see how the problem arises:
And
And also:
An image always has intrinsic values, so in most cases, it won’t have the same size as its container, so with percentage units will have an effect. Gradients don’t have intrinsic values, thus a gradient’s dimensions will be equal to the size of its container, and with percentage values will never work unless we specify a different from its container’s dimensions.
The second gold rule when using perchance values is: when using gradient always define a background-size
Using a Pixel Value
This time, instead of using percentage values, replace them with pixel values. This means it will be necessary to calculate the number of pixels to use to control the background image position. Use (px) to signify the pixel value.
Let’s try using a percentage and see what happens.
| <!DOCTYPE html><html><head><style>body { background-image: url(‘wave.jpg’); /* The image used */ background-repeat: no-repeat; /* Do not repeat the image */ background-attachment: fixed; /* Assures image stays in place */ background-position: 125px 150px; /* Controls your image position */}</style></head><body><h1>The Background-position Property</h1><p>Here, the background image will be positioned centered at top.</p></body></html> |
As you can see, the first value of 125px pushed the image to the right, and the pixel value of 150 pushed the image down in the vertical alignment. Using the pixels is a really nice, precise way to control alignment when perfection is critical.
background-repeat
C точки зрения технической оптимизации — очень полезное свойство . Позволяет размножить одну маленькую картинку на большую площадь. При этом, картинка должна быть бесшовной, чтобы не было видно границ. Может принимать 6 различных значений, 4 из которых я раньше использовал, а вот два последних стали для меня открытием.
Итак, подробнее:
- no-repeat. Картинка не повторяется, все просто
- repeat-x. Повторяется только по горизонтали
- repeat-y. Только по вертикали
- repeat. Как по горизонтали, так и по вертикали.
- space. Все пространство заполняется максимально возможным количеством изображений, первое и последнее (по горизонтали и вертикали) поровну обрезаются
- round. Аналогично предыдущему, с тем отличием, что первое и последнее масштабируются для заполнения
Возьмем пример из предыдущего раздела, с несколькими изображениями и применим заполнение:
|
1 2 3 |
Первое не будет повторяться, второе будет, но только по вертикали и третье заполнит всю доступную область.
background-repeat – повтор фонового изображения
Свойство определяет должно ли повторяться фоновое изображение, а если да, то как.
Значения этого свойства (помимо обычных значений вроде ):
- (по умолчанию) – повторение фонового изображения выполняется в обоих направлениях (по вертикали и горизонтали);
- – повторение осуществляется только по горизонтали;
- – повторение только по вертикали;
- – не повторять, просто показать изображение один раз;
- – повторение изображения делается в обоих направлениях так, чтобы они полностью заполнили область; размещение изображений выполняется равномерно, для к ним добавляются отступы, при этом крайние изображения всегда должны касаться краёв области;
- – повторение изображения осуществляется в обоих направлениях так, чтобы в область поместилось целое количество изображений; при этом изображения могут как уменьшаться в размерах, так и растягиваться (если осталось меньше половины ширины изображения, то выполняется их растягивание, если больше, то сужение).
Также имеется синтаксис с двумя значениями (первое – по горизонтали, второе – по вертикали):
Синтаксис с одним значением – это просто сокращение синтаксиса с двумя значениями. Например, значение вычисляется как .
Сокращенная запись
Независимо от того, в каком порядке указаны свойства в краткой записи, работать они будут. Но это не валидно (код будет неправильным с точки зрения стандартов), W3C рекомендует применять такой порядок:
body {
background-image: url("image.png");
background-position: top left;
background-size: 95% 95%;
background-repeat: no-repeat;
background-attachment: scroll;
background-origin: padding-box;
background-clip: content-box;
background-color: #333};
}
Или краткий вариант записи:
body {background: url("image.png") top left / 95% 95% no-repeat scroll padding-box content-box #333;}
Они идентичны, но второй вариант занимает намного меньше места и грузится быстрее.