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

Как сделать фон сайта css

  • автор:

Как работать с фоновыми картинками в CSS

Три примера вёрстки, которые встречаются часто и пригодятся наверняка.

Максим Васянович

Максим Васянович

Автор статей по программированию. Преподаватель, ментор, выпускник Skillbox. Фрилансер, веб-разработчик

При разработке сайта верстальщик должен отличать контентные (информативные) изображения от декоративных.

Контентные изображения связаны со структурой и смысловым наполнением страниц. Они содержательны, поэтому их вставляем в разметку.

Декоративные изображения — это элементы оформления: разделители, маркеры, значки, фоны и так далее. Они не несут полезной информации для пользователя, поэтому их задаём средствами CSS . Так мы избавляем HTML-документ от всего лишнего.

Пример явно декоративных изображений — пиктограммы («иконки») и фоновые картинки. Научимся их верстать с помощью CSS-свойства background.

Иконка соцсети без текста

Почти на любом сайте есть блок со ссылками на Facebook*, «ВКонтакте», Instagram* и другие соцсети:

Поскольку это иконки, а текста (контентной составляющей) мы рядом не видим, — нужно использовать CSS.

Здесь есть пара нюансов:

  • Раз текста нет, то у ссылки нет размеров. А фона без размеров не бывает (нельзя покрасить стену, когда самой стены нет).
  • Если мы зададим размеры ссылке, то они не сработают, так как по умолчанию ссылка — строчный элемент (его размер не изменить с помощью свойств width и height).

Обойдём эти ограничения.

Сперва напишем простую разметку — список ссылок. Классы сделаем по БЭМ , чтобы наш компонент было удобно стилизовать и использовать повторно.

Начнём, конечно, с HTML-кода:

На скриншоте выше видно, что значок находится слева от текста. Вспоминаем все свойства background и понимаем, что для размещения слева годится background-position (начальная позиция фонового изображения). Перейдём к коду.

Сперва ничего особенного — обычная ссылка:

Не совсем то, чего ожидали. Давайте разбираться.

Наш «конвертик» стал фоновым изображением для блока, который занимает ссылка. Текст ссылки — это содержимое того же блока. Оно и наложилось на наше фоновое изображение.

Значит, нужно отодвинуть это самое содержимое от левой границы блока (помните, мы прижали «конвертик» именно к левому краю). Причём отодвинуть более чем на 20px (ширина фоновой картинки, заданная background-size) — тогда увидеть наш фон уже ничто не помешает.

Делается это с помощью свойства padding (внутренний отступ).

Добавим в код такой отступ слева:

На заметку: этот приём также подходит для иконок справа, сверху или снизу от текста. Например, нужна иконка справа — меняйте отступ слева на отступ справа, и позицию фона задайте тоже справа.

Блок с контентом поверх фонового изображения

Подобные блоки привлекают внимание. Фоном идёт картинка, а поверх неё текст. Давайте разбираться, как такое сделать.

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

Однако мы не всегда знаем заранее, сколько контента будет внутри блока — не изменят ли потом его содержимое. Могут поменять заголовок, сделать его больше на две-три строки — и тогда всё сломается. Поэтому фон нужно делать адаптивным. Итак, к коду.

Создаём простую HTML-разметку:

class="card">

class="card__title">Мальдивские острова

class="card__price">от 55 000 р

"tel:+74932200080" class="card__link">+7 (4932) 2000-80

Главное у нас снова в CSS:

.card < padding: 30px; background-image: url("../img/content-bg.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; >
  • Чтобы даже при увеличении текста ничего не сломалось — применяем внутренний отступ (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 просто выучить, даже если вы никогда не программировали. Во время обучения вам будет помогать эксперт-куратор. Вы разработаете 3 проекта для портфолио, а Центр карьеры поможет найти работу Python-разработчиком.

Узнать про курс

Профессии с трудоустройством

  • Графический дизайнер
  • Python-программист
  • Инженер по тестированию
  • Бизнес-аналитик
  • Интернет-маркетолог 2023

Фон — Основы верстки контента

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

Свойство background является обобщенным для 8 свойств:

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

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

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

Установка цвета или изображения

Базовой функцией свойства background является установка фонового цвета или фонового изображения. Для этого используются свойства:

  • background-color — установка фонового цвета
  • background-image — установка фонового изображения или градиента

Для установки цвета может использоваться различная запись: шестнадцатеричная; с помощью функций rgb() , hsl() и других. В конце урока будет оставлена ссылка на сайт, где можно выбрать любой цвет и получить его код для установки в качестве значения свойства background-color

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

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

В качестве значения background-image принимает функцию url() . Похожий принцип используется при подключении шрифтов на страницу.

Может показаться, что результат такой же, как и при использовании тега . Однако есть важное отличие: при использовании background-image изображение не находится в HTML и не участвует в формировании размеров блоков.

В примере выше для блока с классом image установлено не только изображение, но и заданы размеры с помощью свойств width и height . Без них изображение пропадет со страницы, так как, фактически, блок будет являться пустым.

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

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

background-image: url("path_to_image_1"), url("path_to_image_2"); 

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

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

CSS позволяет управлять тем, будет ли браузер клонировать изображение, и, если да, то по какому направлению. За это отвечает свойство background-repeat . Оно принимает одно из следующих значений:

  • repeat — Значение по умолчанию. Копировать изображение по всем направлениям, пока это позволяет пространство
  • repeat-x — Копировать только по горизонтали
  • repeat-y — Копировать только по вертикали
  • no-repeat — Не копировать
  • round — Копировать с возможностью сжатия, чтобы уместить максимальное количество копий. Это значение используется редко, так как приводит к деформации изображения
  • space — Копировать максимальное количество изображений без их обрезки. В начале копии располагаются в крайних точках, а потом равномерно располагаются в остальных частях блока. При этом возможны пробелы между копиями

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

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

Однако не всегда мы можем угадать, какого размера нужно изображение. Это зависит от множества факторов, например:

  • Разрешение экрана пользователя
  • Адаптивность проекта
  • Интерактивность, когда пользователь может взаимодействовать со страницей и от этого меняются некоторые ее части

При таких условиях может понадобиться одно изображение, которое, в то же время, будет подстраиваться по размеру под «реалии» страницы. Для этого существует свойство background-size , которое принимает два значения:

  • Ширина изображения
  • Высота изображения

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

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

Свойство background-size имеет два зарезервированных значения:

  • cover — Изображение масштабируется так, чтобы занять весь блок. В этом случае изображение может быть обрезано
  • contain — Изображение масштабируется так, чтобы максимально покрыть область блока, но не обрезать само изображение

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

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

Еще одно свойство, которое влияет на размер изображения — background-origin . Его действие похоже на свойство box-sizing , которое отвечает за то, как браузер обрабатывает внутренние отступы и границы блока.

Свойство background-origin определяет, будет ли фоновое изображение располагаться на внутренних отступах или границах. Свойство принимает одно из значений:

  • border-box — фоновое изображение рисуется на всем блоке, включая внутренние отступы и границы
  • padding-box — значение по умолчанию. Фоновое изображение рисуется в области блока и его внутренних отступов, но не учитывается размер границ, заданных свойством border
  • content-box — фоновое изображение рисуется не по всему блоку, а по области контента внутри него

Взглянем на пример:

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

Здесь поможет свойство background-clip , задача которого — точно определить, как обрезать изображение при его выходе за пределы блока. Как и background-origin , свойство принимает одно из трех значений:

  • border-box — обрезать по внешним границам элемента
  • padding-box — обрезать по границам внутренних отступов
  • content-box — обрезать по границам контента

Еще одно значение — text , которое до сих пор является экспериментальным, и предполагает обрезку изображения по границам текста. Со временем поддержка станет полной и значение можно будет использовать без опасения. Оно добавлено в пример, но может сработать некорректно в другом окружении.

Важно: свойство background-clip влияет не только на фоновое изображение, но и на фоновый цвет, установленный с помощью свойства background-color

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

Осталось два свойства из набора свойства background . Это:

  • background-position — позиционирование/расположение фона внутри блока
  • background-attachment — прокрутка фона вместе с контентом

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

  • top — расположить фон в центре и прижать к верхнему краю
  • left — расположить фон в центре и прижать к левому краю
  • right — расположить фон в центре и прижать к правому краю
  • bottom — расположить фон в центре и прижать к нижнему краю
  • center — расположить фон в центре

Такое же поведение можно задать, используя значения для координат x и y. Например, чтобы воспроизвести поведение значения top , нужно по оси x указать значение в 50%, а для оси y значение 0 . В качестве единиц измерения можно использовать любые ранее изученные единицы: px , em , % и так далее.

.bg  /* Эквивалентно background-position: top */ background-position: 50% 0; > 

Также в качестве значений для осей x и y можно указывать уже изученные ключевые слова: top , right , bottom , left и center . Это помогает сделать CSS более выразительным и читаемым.

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

Свойство background-attachment позволяет контролировать такое поведение. Для этого устанавливается одно из значений:

  • scroll — значение по умолчанию. Фоновое изображение располагается в соответствии со свойством background-position . При этом оно фиксируется в области и не пропадает при скролле контента
  • fixed . У этого значения есть хитрость: позиционирование происходит не относительно блока, где было установлено свойство background , а относительно всей страницы целиком. Однако видимо оно будет только в рамках того блока, где был установлен фон. Такое поведение иногда неочевидно, поэтому значение используется редко
  • local — изображение фиксируется в определенной точке относительно контента. В примере ниже таким контентом является текст, поэтому фоновое изображение находится ровно по его центру, так как свойство background-position имеет значение center

Порядок записи свойств в background

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

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

Обязательное требование к записи — совместная запись свойств background-position и background-size . Для их записи используется символ / и позиционирование обязательно стоит до размеров. Вот как это выглядит в реальном CSS файле:

.element  background: url("../assets/images/hexlet.png") center / 0.5rem no-repeat #288cff; > 

В этой записи установлены следующие свойства:

  • background-image: url(«../assets/images/hexlet.png»)
  • background-position: center
  • background-size: 0.5rem
  • background-repeat: no-repeat
  • background-color: #288cff

Все свойства, которые не указаны, будут приведены в значение по умолчанию, что удобно при создании своих собственных компонентов.

В этом уроке мы познакомились со свойствами, составляющими обобщенное свойство background :

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

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

Наши выпускники работают в компаниях:

Как сделать фон? CSS-свойство background

В CSS свойство background предназначено для управления фоном любого элемента.

Это универсальное свойство, которое позволяет вам сразу установить несколько параметров. А именно:

  • фоновое изображение или градиент;
  • начальную позицию фонового изображения и его размер;
  • повтор фонового изображения;
  • перемещение фона относительно области просмотра браузера и элемента;
  • цвет и т.д.
body { background: url(bg.jpg) /* image */ top center / 200px 200px /* position / size */ no-repeat /* repeat */ fixed /* attachment */ padding-box /* origin */ content-box /* clip */ green; /* color */ }

Универсальное свойство background состоит из восьми других свойств (в скобках указано значение по умолчанию, которое имеет каждое из них):

  • background-image (none);
  • background-position (0% 0%);
  • background-size (auto);
  • background-repeat (repeat);
  • background-attachment (scroll);
  • background-origin (padding-box);
  • background-clip (border-box);
  • background-color (transparent).

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

background-image – фоновое изображение или градиент

CSS-свойство background-image позволяет в качестве фона устанавливать обычные изображения (например, PNG, SVG, JPG, GIF, WebP) и градиенты. По умолчанию данное свойство имеет значение none .

Использовать в качестве фона изображение очень просто. Осуществляется это так:

Пример установки в качестве фона изображения

.image { /* универсальное свойство */ background: url('/assets/img/bg.jpg'); /* через специальное свойство */ /* background-image: url('/assets/img/bg.jpg'); */ }

Значение url() позволяет указать путь к файлу изображения, и оно будет отображаться в качестве фона для этого элемента.

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

В url() задать изображение можно также через URI данные:

Пример задания изображения CSS-свойству background-image через URI данные

.image { /* base64 encoded png */ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeBAMAAADJHrORAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAADUExURTWn/0me3wIAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAPSURBVCjPYxgFwxgwMAAAAeAAAerhzjMAAAAASUVORK5CYII='); background-repeat: no-repeat; background-position: center; }

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

Пример двухцветного линейного градиента, идущего сверху вниз:

Пример двухцветного линейного градиента, идущего сверху вниз

.linear-gradient { background-image: linear-gradient(black, white); /* направление по умолчанию: to bottom */ }

С указанием угла и нескольких цветов:

Пример линейного градиента с указанием угла и нескольких цветов

.linear-gradient { background-image: linear-gradient(135deg, #f44336, #ff9800 20%, #ffeb3b 70%, #4caf50); }

Радиальный градиент указывается с помощью radial-gradient :

Пример радиального градиента

.radial-gradient { /* circle - форма радиального градиента */ background: radial-gradient(circle, black, white); }

Пример конического градиента:

Пример создания конического градиента

.conic-gradient { background-image: conic-gradient(#2196f3 30%, #ffc107 0 70%, #f44336 0); }

Кроме этого в CSS имеются повторяющиеся градиенты ( repeating-linear-gradient , repeating-radial-gradient и repeating-conic-gradient ), с помощью них можно например, создавать различные узоры.

Создание узора с помощью повторяющегося градиента repeating-linear-gradient

body { min-height: 100vh; background-image: repeating-linear-gradient(45deg, #fafafa, #fafafa 20px, #e0e0e0 20px, #e0e0e0 40px); }

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

Пример создания несколько градиентов наложенных друг на друга

body { min-height: 100vh; background: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee) 0% 0% / 60px 60px, linear-gradient(-45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee) 0% 0% / 60px 60px; }

background-position – положение фонового изображения

Свойство background-position задаёт позицию фонового изображения (или градиента). Значение по умолчанию: 0% 0% (помещает изображение в верхний левый угол).

.bg { background-position: 0% 0%; }

Первое значение определяет смещение по горизонтали, а второе — по вертикали.

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

  • пикселей (например, background-position: 100px 5px );
  • процентов ( background-position: 100% 5% );
  • с помощью ключевых слов: left , center , right , top и bottom ( background-position: top right ).

В современных браузерах в background-position можно указывать до 4 значений.

Когда вы объявляете одно значение, оно будет определять горизонтальное смещение. Вертикальное в этом случае будет иметь значение center .

.bg { background-position: 50px; /* 50px center */ }

Задавать background-position можно с помощью трёх или четырёх значений. В трех- или четырехзначном синтаксисе чередуются ключевые слова (кроме center ) и величина смещения ( px или % ). При этом ключевое слово должно предшествовать величине смещения, указанной с помощью px или % .

При указании трёх значений, браузер выставляет «отсутствующее» четвертое значение как 0.

.bg { background-position: left 45px bottom; /* left 45px bottom 0px */ }

Это свойство расположит фоновое изображение слева на 45px и снизу на 0px.

Пример использования в background-position 4 значений:

.bg { background-position: left 45px bottom 10px; /* left 45px bottom 10px */ }

Это свойство поместит изображение слева на 45px и снизу на 10px.

Пример использования CSS-свойства background-position для настройки положения фонового изображения

background-size – масштабирование фона

Свойство background-size масштабирует фоновое изображение согласно заданным размерам. По умолчанию оно имеет значение auto .

Пример синтаксиса для явного указания размеров фона:

.cover { background-image: url(cover.jpg); /* ширина - 400px и высота - 300px */ background-size: 400px 300px; }

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

1. Ключевые слова: auto (по умолчанию), contain и cover .

  • auto – автоматически рассчитывает размер на основе реального размера изображения и соотношения сторон;
  • contain – масштабирует изображение с сохранением пропорций так, чтобы оно целиком поместилось внутрь фона (т.е. 100% auto или auto 100% по меньшей стороне);
  • cover – масштабирует изображение с сохранением пропорций так, что оно всегда покрывала всю область фона (т.е. 100% auto или auto 100% по большей стороне);

2. Одно значение. При указании только одного значения (например, background-size: 400px ), оно указывает ширину, а высота в этом имеет значение auto .

В background-size задавать размеры можно используя любые единицы измерения: px , % , em , vw , vh и т.д.

3. Два значения. При указании двух значений, первое определяет ширину фонового изображения, а второе – его высоту. Как и в синтаксисе с одним значением, вы можете использовать любые единицы измерения, которые вам нравятся.

Пример использования CSS-свойства background-size для масштабирования фона согласно заданным размерам

background-repeat – повтор фонового изображения

Свойство background-repeat определяет должно ли повторяться фоновое изображение, а если да, то как.

.card { background-image: url(card-bg.png); background-repeat: repeat-x; }

Значения этого свойства (помимо обычных значений вроде inherit ):

Пример использования CSS-свойства background-repeat для указания того как должно повторяться фоновое изображение

  • repeat (по умолчанию) – повторение фонового изображения выполняется в обоих направлениях (по вертикали и горизонтали);
  • repeat-x – повторение осуществляется только по горизонтали;
  • repeat-y – повторение только по вертикали;
  • no-repeat – не повторять, просто показать изображение один раз;
  • space – повторение изображения делается в обоих направлениях так, чтобы они полностью заполнили область; размещение изображений выполняется равномерно, для к ним добавляются отступы, при этом крайние изображения всегда должны касаться краёв области;
  • round – повторение изображения осуществляется в обоих направлениях так, чтобы в область поместилось целое количество изображений; при этом изображения могут как уменьшаться в размерах, так и растягиваться (если осталось меньше половины ширины изображения, то выполняется их растягивание, если больше, то сужение).

Также имеется синтаксис с двумя значениями (первое – по горизонтали, второе – по вертикали):

.card { background-repeat: repeat space; /* background-repeat: repeat repeat; */ /* background-repeat: round space; */ }

Синтаксис с одним значением – это просто сокращение синтаксиса с двумя значениями. Например, значение space вычисляется как space space .

.card { background-repeat: space space; }

background-attachment – прокрутка фона относительно области просмотра

Свойство background-attachment определяет как будет перемещаться фон относительно области просмотра браузера и элемента для которого он установлен.

Пример использования CSS-свойства background-attachment для указания того, как должен прокручиваться фон относительно области просмотра

  • scroll (по умолчанию) – фон прокручивается в области просмотра браузера, но остается фиксированным внутри самого элемента;
  • fixed – фиксированный фон несмотря ни на что;
  • local – фон прокручивается как в окне браузере, так и в внутри элемента (если имеется прокрутка).

background-origin — размер области для рисования фона

Свойство background-origin определяет область для рисования фона.

Пример использования CSS-свойства background-origin для изменения области для рисования фона

  • border-box – вся область элемента включая границы (border);
  • padding-box (по умолчанию) – область элемента за исключением границ (т.е. включая только padding);
  • content-box – область содержимого элемента (т.е. за исключением границ и padding);

background-clip – обрезка фона

background-clip очень похож на background-origin , но в отличие от него он обрезает фон, а не изменяет его размер.

background-clip имеет точно такие же значения ( border-box , padding-box и content-box ), но в качестве значения по умолчанию выступает border-box .

Пример использования CSS-свойства background-clip для обрезки фона

background-color – цвет фона

Свойство background-color применяется для установления сплошного цвета в качестве фона элемента.

По умолчанию данное свойство имеет значение transparent (прозрачный цвет).

body { background-color: transparent; /* default */ }

Пример задания цвета посредством шестнадцатеричного кода:

Пример использования CSS-свойства background-color для задания цвета

.image { background-color: #ffeb3b; }

Шестнадцатеричные коды – это один из способов объявления цвета в CSS. Другой способ – это использовать имена:

body { background-color: white; /* #ffffff */ }

Ещё способы объявить цвет – это использовать rgb() , rgba() , hsl или hsla :

Пример использования CSS-свойства background-color для задания полупрозрачного цвета

body { background-color: rgba(63, 81, 181, 0.5); /* полупрозрачный цвет rgb(63, 81, 181) или #3f51b5 /* современная запись */ /* background-color: rgb(64 81 181 / 50%) */ }
body { background-color: hsla(231, 48%, 48%, 0.5); /* современная запись */ /* background-color: hsl(231deg 48% 48% / 50%); */ }

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

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

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

Пример использования CSS-свойства background для задания нескольких фоновых изображений одному элементу

.multiple { background-image: url('bg-3.png'), url('bg-2.png'), url('bg-1.png'); background-repeat: no-repeat; background-position: right 20px bottom 20px, 20px 20px, 0% 0%; /* с помощью универсального свойства */ /* background: url('bg-3.png') right 20px bottom 20px no-repeat, url('bg-2.png') 20px 20px no-repeat, url('bg-1.png') 0% 0% no-repeat; }

#5 – Работа с фоновыми картинками

#5 – Работа с фоновыми картинками

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

Видеоурок

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

Чтобы сделать задний фон картинкой необходимо указать полный путь к картинке, а также добавить характеристики отображения картинки: повторение, размещение, сжатие и так далее.

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

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