Фон — Основы верстки контента
Верстальщик довольно часто сталкивается с необходимостью стилизовать не только конкретные элементы, такие как таблицы, списки, текст, медиаэлементы, формы. Порой нужно также стилизовать и блоки, внутри которых они находятся. На сайтах встречаются фоновые изображения, градиенты, цветовые подложки. Для их создания используется свойство 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
Фон элемента HTML — это то, что появляется за текстом. Хотя CSS позволяет применять фон к элементу любого типа, он в основном используется для блочных элементов.
Фон применяется только к целевому элементу. Учитывая, что у большинства элементов HTML фон прозрачный, применение фона к будет выглядеть так, словно он применяется ко всем элементам.
background-color
Значение по умолчанию: transparent ; наследуется дочерними элементами: нет.
Так как мы уже рассмотрели разные способы определения цвета в CSS, применять цвет фона просто:
body
Весь элемент будет залит простым фоновым цветом. Имейте в виду, что всегда следует выбирать подходящий цвет текста, чтобы сохранить содержимое читабельным.
background-image
Поскольку простых цветов, как правило, недостаточно, CSS позволяет применять изображения в качестве фона элементов.
Для добавления фонового изображения требуется указать только его URL:
body < background-image: url(images/diagonal-pattern.png); >Поведение изображения (как оно повторяется, где расположено, какой у него размер) определяется другими свойствами фона. background-image задаёт только, какое изображение использовать.
Имейте в виду, что элемент HTML не принимает во внимание размеры фонового изображения. Даже если изображение больше, чем элемент, к которому оно применяется, элемент не изменит свои размеры, чтобы соответствовать изображению, поскольку изображение является чисто декоративным и оно здесь для поддержки элемента.
Разница между ![]()
и фоновыми изображениями
Элемент предназначен для изображений, которые являются частью содержимого, в то время как фоновые изображения в CSS чисто декоративные.
Логотип компании, эскизы галереи, изображение продукта и др. — всё это считается содержимым и для него следует использовать элемент .
Диагональный узор, красивый пейзаж, иконка корзины и др. — их можно рассматривать как декоративные, так как они поддерживают содержимое, но не являются его частью. Если бы они исчезли, у веб-страницы по-прежнему сохранится смысл.
Что касается многочисленных двойных выборов, граница между содержимым и стилем размыта. Некоторые визуальные методы легче достичь с помощью фона CSS. Просто спросите себя, важно ли для страницы изображение, которое вы используете. Если да, то применяйте элемент .
Градиенты
CSS также позволяет определять цветовые градиенты в качестве фонового изображения, двух различных видов:
- linear-gradient для градиентов в одном направлении, в прямоугольной форме;
- radial-gradient для градиентов во всех направлениях, в круговой форме.
Мы расскажем о градиентах позже. Единственное, что нужно сейчас знать — фоновые градиенты рассматриваются в качестве фонового изображения:
body
background-position
По умолчанию фоновое изображение будет повторяться до бесконечности. Вы можете указать исходное положение, выбрав горизонтальное значение х и вертикальное у.
Для каждой координаты вы можете использовать:
- значения в пикселях;
- проценты, относительно размеров элемента HTML;
- ключевые слова, такие как center , left , bottom и др.
body
Вы можете смешивать разные единицы координат:
body
background-repeat
По умолчанию фоновое изображение будет повторяться до бесконечности. Вы можете выбрать, чтобы оно повторялось только по горизонтали, только по вертикали или не повторялось вообще.
body < background-repeat: repeat-x; >/* Только по горизонтали */ body < background-repeat: repeat-y; >/* Только по вертикали */ body < background-repeat: no-repeat; >/* Фоновое изображение появится только один раз */background-size
Значение background-size в CSS позволяет задавать размер фонового изображения. Изображение может быть оставлено в исходном размере, растянуто, или подогнано под размеры доступного пространства.
Примечание: Если значение этого свойства не задано в сокращённом свойстве background , которое применяется к элементу после CSS-свойства background-size , то значение этого свойства затем сбрасывается до исходного значения c помощью сокращённого свойства.
| Начальное значение | auto auto |
|---|---|
| Применяется к | все элементы. Это также применяется к ::first-letter и ::first-line . |
| Наследуется | нет |
| Проценты | относительно области позиционирования фона |
| Обработка значения | как указано, но с относительной длиной, конвертируемой в абсолютные длины |
| Animation type | повторяющийся список из |
Синтаксис
/* Ключевые слова */ background-size: cover; background-size: contain; /* Указано одно значение - ширина изображения, */ /* высота в таком случае устанавливается в auto */ background-size: 50%; background-size: 3em; background-size: 12px; background-size: auto; /* Указаны два значения - */ /* ширина и высота соответственно */ background-size: 50% auto; background-size: 3em 25%; background-size: auto 6px; background-size: auto auto; /* Значения для нескольких фонов */ /* Не путайте такую запись с background-size: auto auto */ background-size: auto, auto; background-size: 50%, 25%, 25%; background-size: 6px, auto, contain; /* Глобальные значения */ background-size: inherit; background-size: initial; background-size: unset;
Значения
Значение , которое масштабирует фоновое изображение в соответствующем измерении до указанного процента области расположения фона, которое определяется значением background-origin . Область расположения фона по умолчанию является областью, содержащей содержимое поля и его отступы; область также может быть изменена на содержимое или область, содержащую границы, отступы и содержимое. Если attachment фона является fixed , область позиционирования фона вместо этого является всей областью окна браузера, не включая область, покрытую полосами прокрутки, если они присутствуют. Отрицательные проценты не допускаются.
Значение позволяет изменять размер фонового изображения в соответствии с заданным направлением, сохраняя его пропорции.
Масштабирует картинку так, чтобы она максимально накрыла собой весь блок. Картинка при этом не обрезается, а вписывается в блок с сохранением пропорций.
Ключевое слово, обратное contain . Масштабирует изображение как можно больше c сохранением пропорций изображения (изображение не становится сплющенным). Когда изображение и контейнер имеют разные размеры, изображение обрезается либо влево / вправо, либо сверху / снизу.
Интерпретация возможных значений зависит от внутренних размеров изображений (ширина и высота) и внутренней пропорции (соотношение ширины и высоты). Растровое изображение всегда имеет внутренние размеры и внутреннюю пропорцию. Векторное изображение может иметь оба внутренних размера (и, следовательно, должно иметь внутреннюю пропорцию). Он также может иметь одно или не иметь внутренних размеров, и в любом случае он может иметь или не иметь внутреннюю пропорцию. Градиенты обрабатываются как изображения без внутренних размеров или внутренней пропорции.
Предупреждение: Это поведение изменилось в Gecko 8.0. До этого, градиенты обрабатывались как изображения без внутренних размеров, с внутренней пропорцией, идентичной пропорции области расположения фона.
Фоновые изображения, сгенерированные из элементов с использованием -moz-element() (en-US) (которые фактически соответствуют элементу) в настоящее время обрабатываются как изображения с размерами элемента, или как область расположения фона, если элементом является SVG, с соответствующей внутренней пропорцией.
Предупреждение: Это не определённое в настоящее время поведение, которое заключается в том, что внутренние размеры и пропорция должны быть такими же как у элемента во всех случаях.
Визуализированный размер фонового изображения затем вычисляется следующим способом:
Если оба атрибута в background-size заданы и различны от auto :
Фоновое изображение отображается в указанном размере.
Если background-size содержит contain или cover :
Изображение визуализируется с сохранением его внутренней пропорции при наибольшем размере, который содержится внутри области размещения фона или покрывает её. Если изображение не имеет внутренней пропорции, оно отображается с размером области расположения фона.
Если background-size установлен как auto или auto auto :
Если изображение имеет оба внутренних размера, оно отображается с таким размером. Если оно не имеет внутренних размеров и внутренней пропорции, оно отображается с размером области расположения фона. Если оно не имеет размеров, но имеет пропорцию, оно отображается так, если был был бы указан contain . Если изображение имеет один внутренний размер и пропорцию, оно отображается с размером, определённым этим одним размером и пропорцией. Если изображение имеет один внутренний размер, но не имеет пропорцию, оно отображается с использованием внутреннего размера и соответствующим размером области позиционирования фона.
Если изображение имеет внутреннюю пропорцию, то визуализируйте его используя указанный размер, и вычислите другой размер из указанного размера и внутренней пропорции. Если изображение не имеет внутренней пропорции, используйте указанный размер для этого размера. Для другого размера, используйте соответствующее внутреннее измерение изображения, если оно есть. Если такого внутреннего размера нет, используйте соответствующий размер области расположения фона.
Обратите внимание, что изменение размера фона для векторных изображений, в которых отсутствуют внутренние размеры или пропорции, ещё не полностью реализовано во всех браузерах. Будьте осторожны, полагаясь на поведение, описанное выше, и тестируйте в нескольких браузерах (в частности, включая версии Firefox 7 или более ранней версии и Firefox 8 или более поздней версии), чтобы убедиться, что различные визуализации приемлемы.
Формальный синтаксис
background-size =
# (en-US)
=
[ (en-US) (en-US) | (en-US) auto ] (en-US) (en-US) | (en-US)
cover | (en-US)
contain
=
| (en-US)
Примеры
Эта демонстрация background-size: cover и эта демонстрация background-size: contain предназначены для открытия в новых окнах, чтобы вы могли видеть, как contain и cover ведут себя, когда размеры области расположения фона изменяются. Эта серия демонстраций, как работает background-size и взаимодействует с другими свойствами background-* , должна в значительной степени охватить оставшуюся основу в том, как использовать background-size отдельно и в сочетании с другими свойствами.
Замечания
Если вы указываете градиент в качестве фона и указали background-size , который будет использоваться вместе с ним, лучше не указывать размер, который использует единственную автоматическую составную часть, или задаётся с использованием только значения ширины (для примера, background-size: 50% ). Рендеринг градиентов в таких случаях изменился в Firefox 8, и в настоящее время он обычно несовместим во всех браузерах, которые не реализуют рендеринг в соответствии с CSS3 спецификацией background-size и с CSS3 спецификацией градиента значений изображения.
.bar width: 50px; height: 100px; background-image: gradient(. ); /* Лучше не использовать */ background-size: 25px; background-size: 50%; background-size: auto 50px; background-size: auto 50%; /* Допускается */ background-size: 25px 50px; background-size: 50% 50%; >
Обратите внимание, что особенно не рекомендуется использовать размер в пикселях и размер auto с градиентом, потому что невозможно воспроизвести рендеринг в версиях Firefox до 8 и в браузерах, не реализующих рендеринг Firefox 8, без знания точного размера элемента, фон которого указывается.
Спецификации
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # the-background-size |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Справочник по CSS (en-US)
- Несколько фонов (en-US)
- Масштабирование фонового изображения (en-US)
Фон элемента
Фон это не только декоративный эффект для оформления, но и помощь в восприятии смысла, подсказка о содержимом элемента. Например, зелёный цвет ассоциируется с успешной операцией, а красный — с ошибкой.
Если текст светлый, то фон должен быть тёмным (и наоборот), в противном случае, чтение становится трудным или невозможным. Текст с названием компании на фоне пальм и морского пляжа без лишних слов подскажет сферу деятельности и поможет принять решение о том, продолжать ли знакомство с контентом.
По умолчанию фон элемента распространяется на content и padding . На margin — никогда не распостраняется, это внешний отступ.
Свойство background-color
Задаёт цвет фона элемента. Значением может быть зарезервированное слово или цвет, записанный в RGB, RGBA и HEX-формате.
background-color: цвет Свойство background-image
Задаёт фоновое изображение элемента, адрес которого указывается аргументом функции url() . Это может быть как относительный, так и абсолютный путь.
background-image: url('адрес картинки'); Можно сразу задать цвет фона и фоновое изображение, которое будет поверх фона. Например, в случае когда не загрузилась фоновая картинка, пользователь увидит хотябы цвет фона, а не пустое место.
Свойство background-repeat
Управляет повторением фонового изображения. По умолчанию оно повторяется по горизонтали и вертикали. Это заметно если картинка меньше, чем размер элемента.
background-repeat: repeat | repeat-x | repeat-y | no-repeat - repeat — повторять по X и Y. Значение по умолчанию.
- repeat-x — повторять только по X, то есть по горизонтали.
- repeat-y — повторять только по Y, то есть по вертикали.
- no-repeat — не повторять.
Свойство background-position
Управляет положением фонового изображения относительно границ элемента используя две координаты — x по горизонтали и y по вертикали.
background-position: x y В качестве значения можно использовать абсолютные единицы или относительные единицы и ключевые слова (top, bottom, right, left, center). По умолчанию заданы значения left для x и top для y , то есть фон позиционируется относительно верхнего левого угла элемента.
/* Поставит фоновое изображение по центру */ background-position: 50% 50%; /* Поставит фоновое изображение 100px от левого края и 200px от верха */ background-position: 100px 200px; /* Поставит фоновое изображение в нижний праый угол */ background-position: right bottom; /* Поставит фоновое изображение в верхний левый угол */ background-position: left top; Позиция со смещением
Чтобы не привязываться к размерам элемента и не задавать позицию фона жёстко, можно использовать синтаксис позиции со смещением.
backrgound-position: x смещение-x y смещение-y Например, если необходимо поставить фон в нижний правый угол элемента произвольных размеров так, чтобы фон отставал от границ на 30px справа и 20px снизу.
backrgound-position: right 30px bottom 20px; Свойство background-size
По умолчанию браузер не изменяет размер фонового изображения. Если картинка будет больше или меньше размера элемента, будет пустое пространство, не занятое фоном, или наоборот, фон будет виден только частично.
background-size: auto | значение | cover | contain Это свойство позволяет подкорректировать размеры избражения, указав необходимую ширину и высоту. Если не указать высоту, она будет высчитана автоматически, сохраняя пропорции.
/* Исходные размеры изображения, значение по умолчанию */ background-size: auto auto; /* Ширина 200px, высота будет пропорциональна */ background-size: 200px; /* Ширина 200px, высота 300px */ background-size: 200px 300px; Значения contain и cover
Значением также могут быть два зарезервированных слова — contain и cover . Они стремятся вместить в контейнер фоновое изображение по максимуму, только одно за счёт обрезания лишнего, а другое за счёт появления пустого пространства в контейнере.
- Гарантированно сохраняет пропорции изображения.
- Изображению задаются максимально возможнные размеры (не больше оригинала), при которых оно полностью помещается в элемент.
- Изображение может не закрыть весь фон элемента по вертикали или горизонтали, если пропорции блока и изображения не совпадают.
- Гарантированно сохраняет пропорции изображения.
- Изображению задаются минимальные размеры, при которых оно зальёт фон всего элемента.
- Если пропорции изображения и элемента разные, часть изображения, по вертикали или горизонтали, визуально обрезается.
Нажимая на кнопки в примере, вы изменяете значение свойства background-size . По умолчанию установлено значение auto .
Свойство background-attachment
По умолчанию фоновое изображение прокручивается вместе с содержимым элемента. С помощью свойства background-attachment можно зафиксировать фон на месте и запретить прокручиваться при скроле.
background-attachment: scroll| fixed | inherit - scroll — фон прокручиватеся вместе с содержимым. Это значение по умолчанию.
- fixed — фон не прокручивается, зафиксирован на месте.
Многослойный фон
Элементу можно задать несколько фоновых изображений одновременно. Достаточно перечислить их в свойстве background-image через запятую. Для каждого изображения также можно задать значения других свойств фона, тоже через запятую в каждом свойстве.
background-image: url('картинка-1'), url('картинка-2'); background-size: 100px, cover; background-position: top right, center; background-repeat: repeat-x, no-repeat; Получается слоёный пирог из картинок, в котором выше будет то изображение, которое указано раньше в перечислении. Звёздное небо, свинка, комета, космический корабль и планета это 5 разных фоновых изображений.
В большинстве случаев многослойный фон можно заменить одним изображением, на котором в специальном редакторе были совмещены все другие. Вес такого файла будет меньше, чем общий вес отдельных картинок, и браузеру необходимо будет сделать только один запрос вместо пяти, что также увеличит скорость загрузки и отображения страницы.
Свойство background
Составное свойство для одновременного задания значений всех рассмотренных свойств.
background: background-color background-image background-repeat background-position background-attachment Если какой-то компонент не указан, будет взято его значение по умолчанию.
/* Установит только цвет фона */ background: #2a2a2a; /* Прозрачный цвет фона с повторяющейся по x картинкой начиная с верхнего левого угла */ background: url('адрес картинки') repeat-x; Рекомендуется, как минимум вначале, использовать отдельные свойства для каждого значения, так как с составным background можно легко запутаться.
- Свойство background-color
- Свойство background-image
- Свойство background-repeat
- Свойство background-position
- Позиция со смещением
- Значения contain и cover