background-image
The background-image CSS property sets one or more background images on an element.
Try it
The background images are drawn on stacking context layers on top of each other. The first layer specified is drawn as if it is closest to the user.
The borders of the element are then drawn on top of them, and the background-color is drawn beneath them. How the images are drawn relative to the box and its borders is defined by the background-clip and background-origin CSS properties.
If a specified image cannot be drawn (for example, when the file denoted by the specified URI cannot be loaded), browsers handle it as they would a none value.
Note: Even if the images are opaque and the color won’t be displayed in normal circumstances, web developers should always specify a background-color . If the images cannot be loaded—for instance, when the network is down—the background color will be used as a fallback.
Syntax
Each background image is specified either as the keyword none or as an <image> value.
To specify multiple background images, supply multiple values, separated by a comma:
Values
Is a keyword denoting the absence of images.
Is an <image> denoting the image to display. There can be several of them, separated by commas, as multiple backgrounds are supported.
Accessibility concerns
Browsers do not provide any special information on background images to assistive technology. This is important primarily for screen readers, as a screen reader will not announce its presence and therefore convey nothing to its users. If the image contains information critical to understanding the page’s overall purpose, it is better to describe it semantically in the document.
Formal definition
| Initial value | none |
|---|---|
| Applies to | all elements. It also applies to ::first-letter and ::first-line . |
| Inherited | no |
| Computed value | as specified, but with url() values made absolute |
| Animation type | discrete |
Formal syntax
Examples
Layering background images
Note that the star image is partially transparent and is layered over the cat image.
CSS Background Image – With HTML Example Code
Dionysia Lemonaki
What a user sees on a website will impact how good their user experience is. It will also affect how easily they can use the whole site in general.
Adding images to the background of certain parts of a website is often more visually appealing and interesting than just changing the background-color.
Modern browsers support a variety of image file types like .jpg , .png , .gif , and .svg .
This article explains how to add images to your HTML code and how to then fine-tune them to look better.
Background Image Syntax
The first step is to make sure you create an assets directory (folder) to hold the images you want to use in your project.
For example we can create an images folder in the project we are working on and add an image called sunset.png that we want to use.
The background-image CSS property allows you to then place the image behind any HTML element you wish.
This could either be the whole page (by using the body selector in CSS which targets the <body> element in our HTML), or just a standalone specific part of the page such as a section element like in the example below.
To add a background-image to a section tag in your .css file, write the following code:
Let’s discuss what’s going on here in detail:
- section specifies the tag you want to add the image to.
- url() is used to tell CSS where our image is located.
- Inside the parentheses, «images/sunset.png» is the path to the image. This lets the browser know what URL to pull.
- The path in this example is called a relative path which means it is a local file, relative to our project and to our current working directory and is not a web address. To add images we can also use an absolute path, which is a full web address and starts with a domain URL ( http://www. ).
- Using quotes is a good habit but we can omit them, so background-image: url(images/sunset.png) works the same.
- Don’t forget the semicolon!
How to Stop Background Repeat
When you apply a background image to an element, by default it will repeat itself.
If the image is smaller than the tag of which it’s the background, it will repeat in order to fill in the tag.
How do we stop this from happening?
The background-repeat property takes in 4 values and we are able to change the direction in which the image repeats, or stop the image from repeating itself all together.
This is the default value if we don’t give the background-repeat property a value. In this case the image is repeated both horizontally and vertically so in both x-direction and y-direction respectively until it fills the space.
The no-repeat value stops the image from repeating itself from all directions. The image is only shown once.
This value repeats the image only horizontally on the page. The image is repeated across the page, in the x-direction . The x-direction in math is from the left to the right.
This value repeats the image only vertically on the page. The image is repeated down the page ,in the y-direction . The y-direction in math is from top to bottom.
How to Set Background Position
After adding a background image and stopping it from repeating, we are able to further control how it looks within the background of the tag by improving its position.
We’ll use the background-position property to do this.
The selector takes in two values. The first one is for the horizontal position, or x-direction (how far across the tag). The second one is for the vertical position, or y-direction (how far down the tag).
The values can be units, like a pair of pixels:
This will move the image 20px across and 30px down the containing tag.
Instead of pixels we can use a set of keywords like right, left, top, down, or center to place the image at the right, left, top, down, or center of the tag.
This places the image at the right hand side of the center of the tag.
If we wanted to center it both horizontally and vertically, we would do the following:
To position an image with finer detail, it is worth mentioning that we can use percentages.
This positions the image 20% across the tag and 40% down the tag.
So far we have seen values used in combination, but we can also just specify one value like background-position: 20px; or background-position: center; or background-position: 20%; , which applies it to both directions.
How to Resize a Background Image
To control the size of the background image we can use the background-size property.
Again, like the previous properties mentioned, it takes in two values. One for the horizontal (x) size and one for the vertical (y) size.
We can use pixels, like so:
If we do not know the exact width of the container we are storing the image in, there is a set of specific values we can give the property.
- background-size: cover; resizes the background image so it covers up the whole tag’s background space no matter the width of the tag. If the image is too big and has a larger ratio to the tag it is in, this means the image will get stretched and therefore cropped at its edges.
- background-size: contain; contains the image, as the name suggests. It will make sure the whole image is shown in the background without cropping out any of it. If the image is much smaller than the tag there will be space left empty which will make it repeat to fill it up, so we can use the background-repeat: no-repeat; rule we mentioned earlier.
The rule background-size:cover; in this case will crop of parts of the image
When we change it to background-size:contain; we see that the image shrinks to fit the section tag.
How to Use the Background Attachment Property
With the background-attachment property we can control where the background image is attached, meaning if the image is fixed or not to the browser.
The default value is background-attachment: scroll; , where the background image stays with its tag and follows the natural flow of the page by scrolling up and down as we scroll up and down.
The second value the property can have is background-attachement: fixed; .
This makes the background image stay in the same postion, fixed to the page and fixed on the browser’s viewport. This creates a parallax effect which you can see an example of here:
See the Pen by Dionysia Lemonaki (@deniselemonaki) on CodePen.
Background Gradients
A different use case for the background-image property is for telling the browser to create a gradient.
The background-image in this case does not have a URL, but a linear-gradient instead.
The simplest way to do this is to specify the angle. This controls the direction of the gradient and how to colors will blend. Lastly add two colors that you want blended together in a gradient for the tag’s background.
A gradient that goes from top to bottom and from black to white is:
The most common degrees used for gradients are:
- 0deg from top to bottom
- 90deg from left to right
- 180deg from bottom to top
- 270deg from right to left
The above degrees each correspond with to top , to right , to bottom and to left , respectively.
See the Pen by Dionysia Lemonaki (@deniselemonaki) on CodePen.
Instead of keyword colors we can use hex colors to be more particular and have a wider range of options:
See the Pen by Dionysia Lemonaki (@deniselemonaki) on CodePen.
We can also include more than two colors in a gradient, creating different affects and color schemes.
Conclusion
This marks the end of our introduction to the basic syntax of the background-image property.
From here the possibilities are endless and leave room for a lot of creative expression. These effects help the user have a pleasant experience when visiting your website.
Как сделать фон в HTML
От автора: всех приветствую. Фоновые цвета и изображения в веб-дизайне имеют огромную роль, так как позволяют более привлекательно оформить любые элементы. Как сделать фон в html, мы рассмотрим сегодня.
Можно ли обойтись средствами html при задании фона?
Сразу скажу, что нет. Вообще html не создан для того, чтобы оформлять веб-страницы. Это просто очень неудобно. Например, там есть атрибут bgcolor, с помощью которого можно задавать фоновый цвет, но это очень неудобно.
Соответственно, мы будем использовать каскадные таблицы стилей (css). Там гораздо больше возможностей для задания бэкграунда. Мы сегодня разберем самые основные.
Как задать фон через css?
Итак, прежде всего вам нужно определиться с тем, какому элементу нужно задать фон. То есть нам нужно найти селектор, к которому мы будем писать правило. Например, если фон нужно задать всей странице в целом, то можно сделать это через селектор body, всем блокам – через селектор div. Ну и т.д. Фон можно и нужно привязывать к любым другим селекторам: стилевым классам, идентификаторам и т.д.
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
После того, как вы определились с селектором, нужно написать само название свойства. Для задания фонового цвета (именно сплошного цвета, не градиента и не картинки) используется свойство background-color. После него нужно поставить двоеточие и написать сам цвет. Это можно сделать по-разному. Например, с помощью ключевых слов, hex-кода, форматов rgb, rgba, hsl. Любой способ подойдет.
Чаще всего используется способ шестнадцатеричного кода. Для подбора цветов можно использовать программу, в которой видно код цвета. Например, photoshop, paint или какой-либо онлайн-инструмент. Соответственно, для примера пропишу общий фон для всей веб-страницы.
Я советую вам сейчас создать на рабочем столе html и css файлы, подключить css к html и повторять за мной. Так вы поймете все намного лучше, чем если просто читать. Для работы с файлами советую использовать программу Notepad++. Назовите первый файл, например index.html, а второй — style.css. Подключить css к html можно так:
Этот код нужно вставить в секцию head. Важно, чтобы файлы находились в одной папке.
Хорошо, а мы идем дальше. Чтобы показать вам другие возможности задания фона, мне придется создать небольшой блок, в котором мы и будем экспериментировать с фоновым изображением. Да-да, именно с изображением.
Картинка в качестве фона
В качестве картинки я буду использовать маленький значок языка html:
Создадим пустой блок с идентификатором:
Зададим ему явные размеры и фон:
Из этого кода вы можете видеть, что я использовал новое свойство – background-image. Оно предназначено как раз для вставки картинки в качестве фона html-элементу. Посмотрим, что получилось:
Чтобы задать картинку, вы должны после двоеточия написать ключевое слово url, а потом в круглых скобках указать путь к файлу. В данном случае путь указан исходя из того, что изображение лежит в той же папке, что и html-документ. Также нужно указать формат изображения.
Если вы сделали этого, а в блоке все равно не отображается фон, проверьте еще раз, правильно ли вы написали название картинки, правильно ли задан путь и расширение. Это самые частые причины того, что просто не выводится фон, так как браузер не может найти изображение.
Но заметили ли вы одну особенность? Браузер взял и размножил картинку по всему блоку. Так вот, чтобы вы знали, это поведение фоновых картинок по умолчанию – они повторяются по вертикали и горизонтали до тех пора, пока могут влезь в блок. По этим поведением вы можете легко управлять. Для этого используют свойство background-repeat, у которого есть 4 основных значения:
Repeat – значение по умолчанию, изображение повторяется по обеим сторонам;
Repeat-x – повторяется только по оис x;
Repeat-y – повторяется только по оси y;
No-repeat – не повторяется вообще;
Каждое значение вы можете прописать и посмотреть, что же случится. Я пропишу так:
Теперь повторение только по горизонтали. Если прописать no-repeat, то была бы только одна картинка.
Отлично, на этом уже можно заканчивать, так как это базовые возможности работы с фоном, но я вам покажу еще 2 свойства, которые позволяют получить вам больше возможностей в управлении.
С помощью повторения верстальщики раньше достигали того, что создавали фоновые текстуры и градиенты, используя одно малюсенькое изображение. Оно могло быть 30 на 10 пикселей или еще меньше. А может и немного больше. Изображение было таким, что при его повторении по одной или даже по обеим сторонам, не было видно переходов, так что в итоге получался единый цельный фон. К слову, такой подход стоит использовать и сейчас, если вы хотите использовать бесшовную текстуру на своем сайте в качестве фона. Градиент же сегодня уже можно реализовать методами css3, об этом мы еще обязательно поговорим.
Позиция фона
По умолчанию фоновое изображение, если для него не задано повторение, будет находиться в левом верхнем углу своего блока. Но положение можно легко изменить с помощью свойства background-position.
Задавать его можно по-разному. Один из вариантов, это просто указать стороны в которых должна находиться картинка:
То есть по вертикали все так и осталось: фоновая картинка располагается сверху, но по горизонтали мы изменили сторону на right, то есть правую. Еще один способ задать позицию – в процентах. Отсчет при этом начинается в любом случае с верхнего левого угла. 100% — весь блок. Таким образом, чтобы поместить картинку ровно по центру, запишем так:
Запомните одну важную вещь, связанную с позиционированием – первым параметром всегда указывается позиция по горизонтали, а вторым – по вертикали. Итак, если вы видите значение 80% 20%, то можно сразу заключить, что фоновое изображение будет сильно сдвинуто вправо, но вниз при этом сильно не уйдет.
Ну и наконец, прописывать позицию можно в пикселях. Все то же самое, только вместо % будет px. В некоторых случаях может понадобиться и такое позиционирование.
Сокращенная запись
Согласитесь, что код получается достаточно громоздким, если все задавать так, как это делали мы. Получается, и путь к картинке нужно задать, и повторение, и позицию. Конечно, повторение и позиция не всегда необходимо, но в любом случае, более правильно будет использовать сокращенную запись свойства. Она выглядит так:
То есть первым делом нужно записывать общий сплошной фоновый цвет, если это необходимо. Потом путь к изображению, повторение и позиция. Если какой-то параметр не нужен, то просто опускаем его. Согласитесь, так гораздо быстрее и удобнее, а еще мы существенно уменьшаем наш код. Вообще, я советую записывать сокращенно всегда, даже если нужно указать только цвет или картинку.
Далее мы рассмотрим другое свойство – размер фона. Его уже не задашь сокращенно в качестве параметров в сокращенной записи.
Управляем размером фоновой картинки
Наше текущее изображение не очень хорошо подходит для демонстрации следующего трюка, поэтому я возьму другое. По размерам она пусть будет как блок или больше его. Так вот, представьте, что перед вами стоит задача: сделать фоновую картинку так, чтобы она заполняла свой блок не полностью. А картинка, допустим, даже больше размеров блока.
Как можно поступить в таком случае? Конечно, самым простым и разумным вариантом будет просто уменьшение картинки, но не всегда есть возможность это сделать. Допустим, она лежит на сервере и в данный момент нет времени и возможности ее уменьшить. Проблему можно решить с помощью свойства background-size, которое можно назвать относительно новым и которое позволяет манипулировать размером фонового изображения, да и вообще любого фона.
Итак, моя картинка сейчас занимает все пространство в блоке, но я задам ей размер фона:
Опять же, первым параметром задается размер по горизонтали, вторым – по вертикали. Мы видим, что все правильно применилось –фото стало размером на 80% ширины блока в ширину и наполовину в высоту. Тут только нужно внести одно уточнение – задавая размер в процентах вы можете повлиять на пропорции картинки. Так что будьте внимательны, если хотите не нарушить пропорции.
Как вы можете догадаться, также размер фона можно указывать в пикселях. Еще есть два ключевых слова-значения, которые также можно использовать:
Cover – произойдет масштабирование картинки таким образом, чтобы хотя бы по одной стороне она полностью заполняла блок.
Contain – отмасштабирует так, чтобы картинка полностью влезала в блок в максимальном своем размере.
Преимущества этих значений в том, что они не изменяют пропорции картинки, оставляя их прежними.
Также вы должны понимать, что растягивание картинки может привести к ухудшению ее качества. Могу привести пример из жизни и реальной практики верстальщиков. Все знают и понимают, что при верстке под десктопы нужно адаптировать сайт под основные ширины мониторов: 1280, 1366, 1920. Если вы возьмете фоновую картинку размером, допустим, 1280 на 200, и не зададите ей background-size, то экранах с шириной больше появится пустое место, картинка не будет заполнять ширину полностью.
В 99% случаев это не устраивает веб-разработчика, поэтому он задает background-size: cover, чтобы картинка всегда тянулась на максимум по ширине окна. Это хороший прием, который нужно использовать, но теперь вы столкнетесь с проблемой, что пользователи с шириной экрана 1920 пикселей могут увидеть картинку неоптимального качества.
Я напомню, она растянется на максимум по ширине. Соответственно, качество автоматически ухудшится. Единственно правильным решением тут будет изначально использовать картинку большего размера – 1920 пикселей в ширину. Тогда на самых широких экранах она будет в своем натуральном размере, а на других просто будет потихоньку обрезаться, но при этом, при грамотном подборе фоновой картинки, на внешний вид сайта это не повлияет.
В общем, это всего лишь 1 пример того, как использовать знания, полученные вами в этой статье, при верстке реальных макетов.
Полупрозрачный фон с помощью css
Еще одна фишка, которую можно реализовать с помощью css – полупрозрачный фон. То есть через этот фон можно будет разглядеть, что находиться за ним.
Для примера я задам всей странице в качестве фона картинку, которую мы использовали ранее в примерах. Блоку же с идентификатором bg, на котором мы проводим все наши эксперименты, зададим фон с помощью формата задания цвета rgba.
Как я уже и говорил ранее, в css есть много форматов для задания цвета. Один из них – rgb, достаточно известный формат тем, кто работает в графических редакторах. Он записывается так:rgb(17, 255, 34);
Первым значением в скобках идет насыщенность красного, потом зеленого, потом синего. Значение может быть числовым от 0 до 255. Соответственно, формат rgba ничем не отличается, только добавляется еще один параметр – альфа-канал. Значение может быть от 0 до 1, где 0 – полная прозрачность.
Соответственно, для задания средней полупрозрачности нужно записать примерно так:
Как работать с фоновыми картинками в CSS
Три примера вёрстки, которые встречаются часто и пригодятся наверняка.
При разработке сайта верстальщик должен отличать контентные (информативные) изображения от декоративных.
Контентные изображения связаны со структурой и смысловым наполнением страниц. Они содержательны, поэтому их вставляем в разметку.
Декоративные изображения — это элементы оформления: разделители, маркеры, значки, фоны и так далее. Они не несут полезной информации для пользователя, поэтому их задаём средствами CSS . Так мы избавляем HTML-документ от всего лишнего.
Пример явно декоративных изображений — пиктограммы («иконки») и фоновые картинки. Научимся их верстать с помощью CSS-свойства background.
Иконка соцсети без текста
Почти на любом сайте есть блок со ссылками на Facebook*, «ВКонтакте», Instagram* и другие соцсети:
Поскольку это иконки, а текста (контентной составляющей) мы рядом не видим, — нужно использовать CSS.
Здесь есть пара нюансов:
- Раз текста нет, то у ссылки нет размеров. А фона без размеров не бывает (нельзя покрасить стену, когда самой стены нет).
- Если мы зададим размеры ссылке, то они не сработают, так как по умолчанию ссылка — строчный элемент (его размер не изменить с помощью свойств width и height).
Обойдём эти ограничения.
Сперва напишем простую разметку — список ссылок. Классы сделаем по БЭМ , чтобы наш компонент было удобно стилизовать и использовать повторно.
Начнём, конечно, с HTML-кода:
- Заметьте, что свойству display для ссылок мы задали значение inline-block. Поэтому наши ссылки стали строчно-блочными элементами. Теперь можно задать им ширину и высоту — и это уже сработает.
- Одинаковые для всех элементов стили (background-position, background-size, background-repeat) мы вынесли в общий класс social__link.
- А вот фоновые изображения у нас разные — их мы задаём в разных классах.
Вот и готов наш универсальный компонент. Его легко обновить и использовать повторно, когда нам понадобятся другие соцсети.
Иконка рядом с текстом
Такие иконки с фоном встречаются в контактах на сайте. Мы вешаем ссылку на email, а для наглядности добавляем пиктограмму.
На скриншоте выше видно, что значок находится слева от текста. Вспоминаем все свойства background и понимаем, что для размещения слева годится background-position (начальная позиция фонового изображения). Перейдём к коду.
Сперва ничего особенного — обычная ссылка:
Вся магия в CSS:
- Сначала задали путь до изображения.
- Потом установили начальное положение фона (background-position) в left center — ведь наша иконка левее текста (горизонтальная позиция left) и на одном с ним уровне (вертикальная позиция center).
- Размер фонового изображения (background-size) мы задали, чтобы предотвратить отдалённые проблемы.
- И наконец, устанавливаем режим повторения фона (background-repeat) в no-repeat. Без этого фоновая картинка будет дублироваться, пока не заполнит собой блок (как это выглядит — зависит от размеров картинки и HTML-элемента, где она задана фоном).
Что же мы получили:
Не совсем то, чего ожидали. Давайте разбираться.
Наш «конвертик» стал фоновым изображением для блока, который занимает ссылка. Текст ссылки — это содержимое того же блока. Оно и наложилось на наше фоновое изображение.
Значит, нужно отодвинуть это самое содержимое от левой границы блока (помните, мы прижали «конвертик» именно к левому краю). Причём отодвинуть более чем на 20px (ширина фоновой картинки, заданная background-size) — тогда увидеть наш фон уже ничто не помешает.
Делается это с помощью свойства padding (внутренний отступ).
Добавим в код такой отступ слева:
Вот теперь всё вышло как надо:
На заметку: этот приём также подходит для иконок справа, сверху или снизу от текста. Например, нужна иконка справа — меняйте отступ слева на отступ справа, и позицию фона задайте тоже справа.
Блок с контентом поверх фонового изображения
Подобные блоки привлекают внимание. Фоном идёт картинка, а поверх неё текст. Давайте разбираться, как такое сделать.
Взглянув на этот макет, можно предположить, что тут достаточно задать высоту и ширину, расположить фоновое изображение — и всё.
Однако мы не всегда знаем заранее, сколько контента будет внутри блока — не изменят ли потом его содержимое. Могут поменять заголовок, сделать его больше на две-три строки — и тогда всё сломается. Поэтому фон нужно делать адаптивным. Итак, к коду.
Создаём простую HTML-разметку:
Главное у нас снова в CSS:
- Чтобы даже при увеличении текста ничего не сломалось — применяем внутренний отступ (padding). Таким образом уходим от фиксированных размеров: контент можно менять, при этом блок и его фон будут подстраиваться.
- Устанавливаем background-repeat в no-repeat. По умолчанию применяется repeat, но с ним фоновая картинка повторяется, пока не заполнит собой блок, а нам такого не нужно.
- Задаём background-position: center — выравниваем картинку по центру контейнера (как по вертикали, так и по горизонтали).
- А теперь самое важное — масштабируем фон. Задаём свойству background-size значением cover. Это и позволит нашей картинке подстроиться под размеры блока (её ширина или высота будет равняться ширине или высоте блока, а пропорции сохранятся).
Вот мы и сделали фон адаптивным.
Что дальше?
Например, поучитесь верстать картинки формата SVG.
* Решением суда запрещена «деятельность компании Meta Platforms Inc. по реализации продуктов — социальных сетей Facebook и Instagram на территории Российской Федерации по основаниям осуществления экстремистской деятельности.
CSS (англ. Cascading Style Sheets, «каскадные таблицы стилей») — формальный язык описания внешнего вида документов, структурированных с помощью языка разметки (чаще всего HTML или XHTML).
Размер такого элемента равен его содержимому с учётом значений margin, border и padding.
БЭМ («Блок», «Элемент», «Модификатор») — базовые понятия для описания интерфейса любой сложности в одноимённой методологии web-разработки, которая позволяет использовать CSS/HTML/JS много раз.
Padding (внутренний отступ) – это отступ от края блока до его содержимого. То есть пространство между содержимым элемента и его границей.
Верстальщик воплощает в жизнь замысел веб-дизайнера и создаёт рабочие сайты из дизайн-макетов. На курсе вы научитесь верстать одностраничные лендинги, сайты услуг и мероприятий, интернет-магазины. С вёрстки начнётся ваш путь в веб-разработку.
Узнать про курс
Профессии с трудоустройством
- Графический дизайнер
- Python-программист
- Инженер по тестированию
- Бизнес-аналитик
- Интернет-маркетолог 2023
Новости
+7 (499) 444-90-36 Отдел заботы о пользователях
Москва, Ленинский проспект, дом 6, строение 20
- Премии Рунета 2018, 2019, 2020
- Все направления
- О Skillbox
- Вебинары
Пользуясь нашим сайтом, вы соглашаетесь с тем, что мы используем cookies ��