Как задать фон в css: Как задать фон для сайта (свойство CSS background)

15.09.2020 Разное

Содержание

Свойство background | CSS справочник

basicweb.ru

HTML
- Учебник HTML
- Справочник тегов
- Атрибуты событий
- Глобальные атрибуты
- Коды языков
- Мнемоники
- Цвета
- Тесты знаний
CSS
- Учебник CSS
- Справочник свойств
- Селекторы
- Функции
- Правила
- Flexbox генератор
- Grid генератор
- Учебник LESS
JavaScript
- Интерфейсы веб API
- Объект Array
- Объект Date
- Объект Function
- Объект Global
- Объект JSON
- Объект Math
- Объект Number
- Объект Object
- Объект RegExp
- Объект Promise
- Объект String
jQuery
- Селекторы
- События
- Методы DOM
- Перемещения
- Утилиты
- Эффекты
- AJAX
- Объект Callbacks
- Объект Deferred

HTML

HTML учебник
Справочник тегов
Атрибуты событий
Глобальные атрибуты
Мнемоники
Коды языков
HTML цвета
Тесты знаний

CSS

CSS учебник
Справочник свойств
CSS селекторы
CSS функции
CSS правила
Flexbox генератор
Grid генератор
LESS учебник

JavaScript

Интерфейсы веб API
Объект Array
Объект Date
Объект Function
Объект Global
Объект JSON
Объект Math^β
Объект Number
Объект Object

Объект Promise
Объект RegExp
Объект String

jQuery

jQuery селекторы
jQuery события
jQuery методы DOM
jQuery перемещения
jQuery утилиты
jQuery эффекты
jQuery AJAX
jQuery объект Callbacks
jQuery объект Deferred

CSS свойства

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function
backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius

border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-shadow
box-sizing
break-after
break-before
break-inside
caption-side
clear
clip
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor
direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-size
font-style
font-variant
font-weight
grid
grid-area

grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-start
grid-row-gap
grid-row-end
grid-template
grid-template-areas
grid-template-columns
grid-template-rows
justify-content
justify-items
justify-self
height
@keyframes
left
letter-spacing
line-height
list-style
list-style-image
list-style-position
list-style-type
margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media

min-height
min-width
opacity
order
orphans
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-wrap
overflow-x
overflow-y
padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
place-content
place-items
place-self
position
quotes
resize
right
tab-size
table-layout
text-align
text-align-last

background — CSS | MDN

Сокращенное CSS свойство background устанаваливает сразу все свойства стиля фона, такие как цвет, изображение, источник и размер, или метод повтора.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение..

Свойство является сокращением, которое устанавливает следующие свойства в одном объявлении: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, и background-attachment.

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


background: green;


background: url("test.jpg") repeat-y;


background: border-box red;


background: no-repeat center/80% url("../img/image.png");

Предупреждение: background-color можно определить только на последнем фоне, поскольку для всего элемента существует только один цвет фона.

Значения

Формальный синтаксис

[ <bg-layer> , ]* <final-bg-layer>где 
<bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
<final-bg-layer> = <'background-color'> || <bg-image> || <bg-position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
где 
<bg-image> = none | <image>
<bg-position> = [ [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ] ]
<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain
<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}
<attachment> = scroll | fixed | local
<box> = border-box | padding-box | content-box
где 
<image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient>
<length-percentage> = <length> | <percentage>
где 
<image()> = image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> = image-set( <image-set-option># )
<element()> = element( <id-selector> )
<paint()> = paint( <ident>, <declaration-value>? )
<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )
<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()> | <conic-gradient()>
где 
<image-tags> = ltr | rtl
<image-src> = <url> | <string>
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
<image-set-option> = [ <image> | <string> ] <resolution>
<id-selector> = <hash-token>
<cf-mixing-image> = <percentage>? && <image>
<cf-final-image> = <image> | <color>
<linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )
<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )
<conic-gradient()> = conic-gradient( [ from <angle> ]? [ at <position> ]?, <angular-color-stop-list> )
где 
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )
<side-or-corner> = [ left | right ] || [ top | bottom ]
<color-stop-list> = [ <linear-color-stop> [, <linear-color-hint>]? ]# , <linear-color-stop>
<ending-shape> = circle | ellipse
<size> = closest-side | farthest-side | closest-corner | farthest-corner

Пособие для начинающих по позиционированию фона в CSS — CSS-LIVE

Перевод статьи A Primer To Background Positioning In CSS с сайта blogs.adobe.com, автор — Сара Суэйдан.

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

У элемента может быть более одного фонового изображения. Если вы хотите применить более одного фонового изображения, то можете представить их в виде разделённого запятыми списка значений для свойства background-image. Свойство background-position используется для указания позиции фонового изображения, и это свойство стоит рассмотреть поглубже, т.к. его различные возможные значения приводят к разным результатам, некоторые из которых могут оказаться для вас в новинку, если вы не очень хорошо разбираетесь в CSS.

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

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

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

Области боксовой модели CSS

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

Padding box – область элемента, исключающая границу, но включающая контент элемента и окружающие его отступы – указанные при помощи свойства padding.

Content box – область, созданная контентом элемента, исключающая любые отступы и границы.

Области бокса элемента. Изображение взято из CSS-справочника на Codrops, статья про свойство background-origin.

Есть также четвёртая область — «margin box», включающая элемент и его внешние поля, которые указываются при помощи свойства margin.

Когда вы назначаете элементу фон в виде изображения или сплошного цвета, то по умолчанию он закрашивает всю область границы элемента. (Можно изменить это поведение при помощи свойства background-origin, но мы вернёмся к нему в ближайшее время.)

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

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

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

У HTML-элемента есть система координат в CSS. У SVG-элементов, напротив, нет похожей системы координат, поскольку они не регламентируются концепцией боксовой модели.

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

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

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

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

Например, предположим у вас есть фоновое изображение, применённое к элементу, и вы не задали ему повторение (поэтому применяется только один экземпляр этого изображения). Исходной позицией фонового изображения внутри системы координат будет начальная точка системы координат padding box. Поэтому верхний левый угол изображения позиционируется в верхнем левом углу внутреннего отступа элемента. (См. живой пример ниже.)

К элементу применена полупрозрачная граница в 20px. Заметьте, как изображение позиционируется в верхнем левом углу внутреннего отступа элемента.

Изображение любезно предоставлено Freepik.com

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

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

Изменение области позиционирования фона и системы координат при помощи `background-origin`

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

Оно принимает одно из трёх значений: padding-box (значение по умолчанию), content-box и border-box.

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

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

Смотрите пример Сары Суэйден (@SaraSoueidan) «Разные значения background-origin» на CodePen.

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

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

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

Позиционирование фоновых изображений при помощи `background-position`

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

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

Углы смещения элемента и система координат в CSS.

В дополнение к процентным и абсолютным значениям, для смещения можно использовать ещё и пять ключевых слов: top, right, bottom, left и center.

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

background-position: top left;
background-position: 50px 30%;
background-position: top 25%;
background-position: right 10px bottom 20px;
background-position: center center
background-position: 10px 20px;
background-position: 5em 2em;
background-position: 75% 50%;

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

background-position: 10% 50%; /* смещение на 10% вправо, и 50% вниз от верха */
background-position: top; /* идентично `top center` */
background-position: 50px; /* идентично `50px center` */

Можно смешивать и сочетать значения, комбинируя длину с процентами и/или ключевыми словами. Заметьте, что пару ключевых слов можно поменять местами, тогда как комбинацию ключевого слова и длины либо процентов — нельзя. Поэтому center left — правильная запись, а 50% left — нет, она должна выглядеть так: left 50%. При комбинировании ключевого слова и длины или процентного значения, первое значение всегда отвечает за горизонтальное смещение, а второе — за вертикальное.

Собственно говоря, ключевое слово – это сокращённая запись для определённых процентных значений. Точнее сказать: top — смещение 0% от верхнего края, bottom — смещение 100% от верхнего края, left — смещение 0% от левого края, right — смещение 100% от левого края, а center — смещение 50% в том направлении (горизонтальном или вертикальном), к которому оно применяется.

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

Как работают абсолютные значения background-position

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

Лучший способ объяснить и понять это – показать наглядно, поэтому здесь представлено два примера абсолютных значений позиции фона и то, как браузеры реализуют позиционирование фонового изображения при помощи абсолютных значений. Элементу в этих двух примерах задан размер 100px на 80px.

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

Абсолютное значение также может быть отрицательным. В этом случае изображение сместится в обратном направлении от края.

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

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

Как работают процентные значения background-position

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

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

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

Позиционирование фонового изображения при помощи процентных значений..

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

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

Смотрите пример Сары Суэйден (@SaraSoueidan) «background-position Example#2» на CodePen.

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

Смещение относительно любого края

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

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

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

Например, в следующем примере используется четырёхзначный синтаксис:

background-position: top 1em right 3em; /* фоновое изображение позиционируется на 1em вниз от верхнего угла и на 3em влево от правого угла */

background-position: right 1em bottom 1em; /* фоновое изображение позиционируется на 1em вверх от нижнего угла и 1em влево от правого угла */

background-position: left 20px bottom 50px;

Если указано три из четырёх значений, четвёртое значение приравнивается к нулю.

При использовании четырёхзначного синтаксиса следует кое-что помнить: когда приведено три или четыре значения, тогда каждое процентное значение или длина представляют смещение и должны идти за ключевым словом, указывающим край, от которого должно смещаться фоновое изображение. Например, background-position: bottom 10px right 20px представляет вертикальное смещение на 10px вверх от нижнего края и горизонтальное смещение на 20px влево от правого края. Если указано три значения, недостающее смещение приравнивается к нулю. Если вы укажите два численных смещения и одно ключевое слово, то такое значение будет неверным и браузер использует 0% 0% — значение по умолчанию.

Чтобы лучше это понять, поиграйтесь со значениями свойства background-position в следующем живом примере. Для лучшего понимания фоновое изображение сначала позиционируется так, чтобы оно смещалось на 0 пикселей от нижнего и 2em от правого края.

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

Установка размеров, повторение, обрезка изображений и многое другое!

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

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

Кроме того, теперь, помимо основных свойств для фона, есть и дополнительные свойства, которые позволяют применять к фоновым изображениям эффекты наложения, похожие на эффекты, доступные в редакторах типа Photoshop — в частности, свойство background-blend-mode. Если вам интересно изучить всё о наложении в CSS, то можете прочитать об этом в этой статье.

Я надеюсь, что эта статья оказалась для вас полезной. Спасибо за чтение.

P.S. Это тоже может быть интересно:

фон — CSS: каскадные таблицы стилей

Сокращенное свойство CSS background устанавливает сразу все свойства стиля фона, такие как цвет, изображение, исходная точка и размер или метод повтора.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

Исходный код этого интерактивного примера хранится в репозитории GitHub.Если вы хотите внести свой вклад в проект интерактивных примеров, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

Это свойство является сокращением для следующих свойств CSS:

 
фон: зеленый;


фон: url ("test.jpg") repeat-y;


фон: рамка красная;


фон: без повтора центр / 80% url ("../ img / image.png");

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

Синтаксис каждого уровня следующий:

Значения

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

Начальное значение	как каждое из свойств сокращения:
Применяется к	всем элементам.Это также относится к `:: первая буква` и `:: первая строка` .
Унаследовано	нет
Проценты	как каждое из свойств сокращения: `background-position` : относится к размеру области позиционирования фона минус размер фонового изображения; размер относится к ширине для горизонтальных смещений и к высоте для вертикальных смещений `background-size` : относительно области позиционирования фона
Вычисленное значение	как каждое из свойств сокращения:
Тип анимации	как каждое из свойств сокращения:

  [,] * , где  =  ||  [/ ]? || <стиль повторения> || <приложение> ||  ||   = <'background-color'> ||  ||  [/ ]? || <стиль повторения> || <приложение> ||  || , где  = none | <изображение>  = [[слева | центр | право | наверх | внизу | <длина-процент>] | [слева | центр | право | <длина-процент>] [наверх | центр | внизу | <длина-процент>] | [центр | [слева | справа] <длина-процент>? ] && [центр | [наверх | внизу] <длина-процент>? ]]  = [ | авто] {1,2} | крышка | содержат  = repeat-x | повторять-у | [повторить | пространство | круглый | без повтора] {1,2} <прикрепление> = прокрутка | фиксированный | local  = border-box | обивка | content-boxwhere  =  | <изображение ()> | <набор изображений ()> |  | <краска ()> | <плавное затухание ()> | <градиент> <длина-процент> = <длина> | <процент> где  = изображение (? [?, ?]!)  = image-set ( #)  = element ()  = paint (, ?)  = cross-fade (< cf-mix-image>, ?) <градиент> =  | <повторяющийся линейный градиент ()> | <радиальный градиент ()> | <повторяющийся радиальный градиент ()> |  где  = ltr | rtl  =  | <строка> <цвет> =  |  |  |  |  | <имя-цвета> | текущий цвет | <устаревший-системный-цвет> <параметр-набора-изображений> = [<изображение> | <строка>] <разрешение>  =   = ? && <изображение>  = <изображение> |   = linear-gradient ([ | to ]?, )  = повторяющийся -linear-gradient ([ | to ]?, )  = radial-gradient ([ || < size>]? [at ]?, )  = повторяющийся-радиальный-градиент ([ || ]? [ at ]?, )  = conic-gradient ([from ]? [at ] ?, ) где  = rgb (<процент> {3} [/ <альфа-значение>]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?)  = rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, <альфа-значение>?)  = hsl (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?)  = hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?) <сторона-или-угол> = [слева | справа] || [наверх | внизу] <список-цветов-остановок> = [<линейный-цвет-стоп> [, <линейный-цвет-подсказка>]? ] #, <линейный-цвет-остановка> <конечная-форма> = круг | эллипс <размер> = ближайшая сторона | дальняя сторона | ближайший угол | дальний угол | <длина> | <длина- процент> {2} <позиция> = [[слева | центр | справа] || [наверх | центр | внизу] | [слева | центр | право | <длина-процент>] [наверх | центр | внизу | <длина-процент>]? | [[слева | справа] <длина-процент>] && [[наверх | внизу] <процент-длины>]] <список-остановок-углов> = [<цвет-угловых-указателей> [, <угольный цвет-подсказка>]? ] #, <угловой-цветной-стоп>, где <альфа-значение> = <число> | <процент> <оттенок> = <число> | <угол> <линейная-цвет-остановка> = <цвет> <цвет-остановка-длина>? <линейный-цвет-подсказка> = <длина-процент> <угловой-цвет-остановка> = <цвет> && <цвет- stop-angle>?  =  где <цвет-stop-length> =  {1,2}  =  {1,2} <угол- процент> = <угол> | <процент>

Установка фона с цветными ключевыми словами и изображениями

HTML

Звездное небо Мерцание, мерцание Звездное небо Вот абзац

CSS

 .предупреждение {
  фон: розовый;
}

.topbanner {
  фон: url ("https://mdn.mozillademos.org/files/11983/starsolid.gif") # 99f repeat-y исправлено;
}

Результат

таблицы BCD загружаются только в браузере

background-position — CSS: Cascading Style Sheets

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

 
фон-позиция: вверху;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;


фоновая позиция: 25% 75%;


background-position: 0 0;
положение фона: 1 см 2 см;
background-position: 10ch 8em;


background-position: 0 0, в центре;


background-position: нижние 10 пикселей справа 20 пикселей;
background-position: right 3em bottom 10px;
background-position: нижние 10 пикселей справа;
background-position: вверху справа 10 пикселей;


фоновая позиция: наследовать;
фоновая позиция: начальная;
background-position: не задано;

Свойство background-position задается как одно или несколько значений , разделенных запятыми.

Значения

<позиция>

A <позиция> . Позиция определяет координату x / y, чтобы разместить элемент относительно краев рамки элемента. Его можно определить, используя от одного до четырех значений. Если используются два значения, не являющиеся ключевыми словами, первое значение представляет горизонтальное положение, а второе — вертикальное положение. Если указано только одно значение, предполагается, что второе значение будет центр . Если используются три или четыре значения, значения в процентах длины являются смещениями для предшествующих значений ключевого слова.

Синтаксис с одним значением: значение может быть:

Значение ключевого слова center , которое центрирует изображение.
Одно из значений ключевого слова верхний , левый , нижний , правый . Это указывает край, по которому следует разместить элемент. Затем для другого размера устанавливается значение 50%, поэтому элемент помещается в середину указанного края.
A <длина> или <процент> .Это указывает координату X относительно левого края, при этом координата Y установлена на 50%.

Синтаксис с двумя значениями: одно значение определяет X, а другое определяет Y. Каждое значение может быть:

Одно из значений ключевого слова вверху , слева , внизу , справа . Если здесь даны слева или справа , то это определяет X, а другое заданное значение определяет Y. Если даны верхний или нижний , то это определяет Y, а другое значение определяет X.
A <длина> или <процент> . Если другое значение — слева или справа , то это значение определяет Y относительно верхнего края. Если другое значение — верхний или нижний , то это значение определяет X относительно левого края. Если оба значения равны <длина> или <процент> значений, то первое определяет X, а второе — Y.
Обратите внимание: если одно значение — верхний или нижний , то другое значение может не быть верхним или нижним .Если одно значение равно слева или справа , то другое значение не может быть слева или справа . Это означает, например, что верхний верх и левый правый недействительны.
Значение по умолчанию — вверху слева или 0% 0% .

Синтаксис с тремя значениями: Два значения — это значения ключевых слов, а третье — смещение для предыдущего значения:

Первое значение — одно из значений ключевого слова верхний , левый , нижний , правый или центральный .Если здесь даны слева или справа , то это определяет X. Если даны верхний или нижний , то это определяет Y, а значение другого ключевого слова определяет X.
Значение <длина> или <процент> , если это второе значение, является смещением для первого значения. Если это третье значение, это смещение для второго значения.
Одиночная длина или процентное значение — это смещение для значения ключевого слова, которое ему предшествует.Комбинация одного ключевого слова с двумя значениями или недопустима.

Синтаксис с 4 значениями: Первое и третье значения являются значениями ключевого слова, определяющими X и Y. Второе и четвертое значения — смещения для предшествующих значений ключевого слова X и Y:

Первое значение и третье значения одно из значений ключевого слова верхний , левый , нижний , правый .Если здесь даны слева или справа , то это определяет X. Если даны верхний или нижний , то это определяет Y, а значение другого ключевого слова определяет X.
Второе и четвертое значения — <длина> или <процент> значений. Второе значение — это смещение для первого ключевого слова. Четвертое значение — это смещение для второго ключевого слова.

В процентах:

Процентное смещение положения данного фонового изображения относительно контейнера.Значение 0% означает, что левый (или верхний) край фонового изображения выровнен с соответствующим левым (или верхним) краем контейнера, или отметка 0% изображения будет на отметке 0% контейнер. Значение 100% означает, что правый (или нижний ) край фонового изображения выровнен с правым (или нижним ) краем контейнера, или отметка 100% изображения будет на отметке 100% емкости. Таким образом, значение 50% по горизонтали или вертикали центрирует фоновое изображение, поскольку 50% изображения будет на отметке 50% контейнера.Точно так же background-position: 25% 75% означает, что пятно на изображении, которое находится на 25% слева и 75% сверху, будет размещено в месте контейнера, которое находится на 25% слева от контейнера и 75 % от верха контейнера.

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

(ширина контейнера - ширина изображения) * (позиция x%) = (значение смещения x) (высота контейнера - высота изображения) * (позиция y%) = (значение смещения y)

Используя ось X в качестве примера, предположим, что у нас есть изображение шириной 300 пикселей, и мы используем его в контейнере шириной 100 пикселей с размером фона, установленным на auto:

100px - 300px = -200px (разница между контейнером и изображением)

Таким образом, при процентном соотношении позиций -25%, 0%, 50%, 100%, 125% мы получаем следующие значения смещения края изображения до контейнера:

-200 пикселей * -25% = 50 пикселей -200 пикселей * 0% = 0 пикселей -200 пикселей * 50% = -100 пикселей -200 пикселей * 100% = -200 пикселей
-200 пикселей * 125% = -250 пикселей

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

+ 50 пикселей (размещение левого края изображения в центре контейнера шириной 100 пикселей)
0px (левый край изображения совпадает с левым краем контейнера)
-100 пикселей (левый край изображения на 100 пикселей слева от контейнера, в этом примере это означает, что средняя область изображения 100 пикселей центрирована в контейнере)
-200 пикселей (левый край изображения на 200 пикселей слева от контейнера, в этом примере это означает, что правый край изображения совпадает с правым краем контейнера)
-250 пикселей (левый край изображения на 250 пикселей слева от контейнера, в этом примере правый край изображения шириной 300 пикселей помещается в центр контейнера)

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

Начальное значение	`0% 0%`
Применяется ко всем элементам	. Это также относится к `:: первая буква` и `:: первая строка` .
Унаследовано	нет
Проценты	относятся к размеру области позиционирования фона минус размер фонового изображения; размер относится к ширине для горизонтальных смещений и к высоте для вертикальных смещений
Вычисленное значение	список, каждый элемент которого состоит из двух ключевых слов, представляющих начало координат, и двух смещений от этого источника, каждое из которых задано как абсолютная длина (если задано ), в противном случае в процентах
Тип анимации	повторяемый список простого списка длины, процента или вычисления

   # где  = [[осталось | центр | право | наверх | внизу | <длина-процент>] | [слева | центр | право | <длина-процент>] [наверх | центр | внизу | <длина-процент>] | [центр | [слева | справа] <длина-процент>? ] && [центр | [наверх | внизу] <длина-процент>? ]] где <длина-процент> = <длина> | <процент>

Позиционирование фоновых изображений

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

HTML

   Пример первый 
 Пример второй 
 Пример третий

CSS

 
div {
  цвет фона: # FFEE99;
  фон-повтор: без повторения;
  ширина: 300 пикселей;
  высота: 80 пикселей;
  нижнее поле: 12 пикселей;
}


.exampleone {
  фон: url ("https: // mdn.mozillademos.org/files/11987/startransparent.gif ") # FFEE99 2,5 см нижний без повтора;
}
.exampletwo {
  фон: url ("https://mdn.mozillademos.org/files/11987/startransparent.gif") # FFEE99 слева 4em внизу 1em no-repeat;
}


.examplethree {
  background-image: url ("https://mdn.mozillademos.org/files/11987/startransparent.gif"),
                       URL ("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-position: 0px 0px,
                       правая 3em нижняя 2em;
}

Результат

таблицы BCD загружаются только в браузере

Quantum CSS notes

Gecko имеет ошибку, означающую, что background-position не может быть преобразован между двумя значениями, содержащими разные числа значений, например background-position: 10px 10px; и background-position: 20px 20px, 30px 30px; (см. Ошибку 13 ).Новый параллельный движок CSS в Firefox (также известный как Quantum CSS или Stylo, который планируется выпустить в Firefox 57) исправляет это.

Как установить несколько фоновых изображений с помощью CSS?

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

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

фоновое изображение: url (), url (),…; Это свойство используется для установки одного или нескольких фоновых изображений для элемента, разделенных запятыми.
background-position: справа внизу, слева вверху; Это свойство используется для установки положения различных изображений на странице. Он устанавливает начальную позицию для каждого фонового изображения.
фон-повтор: без повторения, повторение; Это свойство используется для установки повторения фоновых изображений.Фоновое изображение может повторяться по горизонтальной и вертикальной оси.
размер фона: обложка | содержать | 30% | 200px 100px; Это свойство используется для установки размера фонового изображения элемента.

Пример 1: Используйте свойство отдельного фона, чтобы указать несколько фоновых изображений.

< HTML >

< голова >

< стиль >

кузов {

выравнивание текста: по центру;

}

h2 {

цвет: зеленый;

}

#GFG {

фоновое изображение:

background-position: center, center;

фоновый повтор: без повтора, без повтора;

размер фона: 400 пикселей 200 пикселей, 500 пикселей 400 пикселей;

отступ: 25 пикселей;

высота: 400 пикселей;

}

стиль >

головка >

< корпус >

< div id = "GFG" >

< h2 > GeeksforGeeks h2 >

Позиция фона CSS: 3 примера со свойством изображения bg

Свойство background-position

CSS 9070 Свойство background-position работает со свойством CSS background-image.Свойство background-position используется для установки начальной позиции изображения на заднем плане. Кроме того, он также может указывать поля сверху, снизу и т. Д.
См. Пример положения фона
Синтаксис положения фона CSS
Ниже приводится синтаксис использования свойства положения фона с его возможными значениями:
background-position: value;
где значения могут быть:
слева
справа
слева по центру
слева вверху
слева внизу
справа вверху
справа внизу
по центру вверху
по центру внизу
и т.п.Обратите внимание: если вы укажете только одно значение, например слева, справа , тогда другое значение по умолчанию будет центр .
Помимо указания комбинаций левого, правого, верхнего и нижнего, значения CSS background-position также могут быть указаны в процентах (%) и пикселях.
Значение свойства CSS background-position в процентах:
background-position: 20% 80%;
где первое значение, 20%, соответствует горизонтали, а другое значение (80%) - вертикальному.
для пикселей
background-position: 20px 80px;
Где первое значение указывает горизонтальное положение, а второе - вертикальное.
Обратите внимание, что для вы должны установить свойство CSS background-attachment как fixed , чтобы это работало в Firefox и Opera.
Пример установки положения фонового изображения CSS
В этом примере мы установим положение фона изображения с комбинацией справа вверху , используя свойство положения фона.См. Пример, щелкнув ссылку ниже:
Испытайте этот пример в Интернете
1
2
3
4
5
6
7
8
9
10
11
12
130002 130007
12
130002
17
18
19
20
21
22
23
24
25
26
27
28
30
000
33
34
35
Логотип коллекции руководств
Пример фонового положения с центром, комбинацией центров
Оцените этот пример онлайн
1
2
3
4
5
6
7
8
9
10
11
12
130002 130007
12
130002
17
18
19
20
21
22
23
24
25
26
27
28
30
000
33
34
35
Логотип коллекции руководств
Пример со значениями по горизонтали и вертикали в пикселях
В этом примере будут использоваться значения по горизонтали и вертикали в пикселях, указанные в свойстве background-position.
Попробуйте этот пример в Интернете
1
2
3
4
5
6
7
8
9
10
11
12
130002 130007
12
130002
17
18
19
20
21
22
23
24
25
26
27
28
30
000
33
34
35

Как задать фон в css: Как задать фон для сайта (свойство CSS background)

Свойство background | CSS справочник

HTML

CSS

JavaScript

jQuery

CSS свойства

background — CSS | MDN

Значения

Формальный синтаксис

Пособие для начинающих по позиционированию фона в CSS — CSS-LIVE

Области боксовой модели CSS

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

Изменение области позиционирования фона и системы координат при помощи background-origin

Позиционирование фоновых изображений при помощи background-position

Как работают абсолютные значения background-position

Как работают процентные значения background-position

Смещение относительно любого края

Установка размеров, повторение, обрезка изображений и многое другое!

P.S. Это тоже может быть интересно:

фон — CSS: каскадные таблицы стилей

Установка фона с цветными ключевыми словами и изображениями

HTML

CSS

Результат

background-position — CSS: Cascading Style Sheets

Значения

Позиционирование фоновых изображений

HTML

CSS

Результат

Quantum CSS notes

Как установить несколько фоновых изображений с помощью CSS?

Позиция фона CSS: 3 примера со свойством изображения bg

Свойство background-position

Свойство background-position

См. Пример положения фона

Синтаксис положения фона CSS

Пример установки положения фонового изображения CSS

Испытайте этот пример в Интернете

Пример фонового положения с центром, комбинацией центров

Оцените этот пример онлайн

Пример со значениями по горизонтали и вертикали в пикселях

Попробуйте этот пример в Интернете

Изменение области позиционирования фона и системы координат при помощи `background-origin`

Позиционирование фоновых изображений при помощи `background-position`