background-position

Интерактивный пример

background-position: top; 

background-position: left; 

background-position: center; 

background-position: 25% 75%; 

background-position: bottom 50px right 100px; 

background-position: right 35% bottom 45%; 

<section class="display-block" id="default-example"> <div class="transition-all" id="example-element"></div> </section> 

#example-element { background-color: navajowhite; background-image: url("/shared-assets/images/examples/star.png"); background-repeat: no-repeat; height: 100%; } 

Синтаксис

/* Ключевые слова */ background-position: top; background-position: bottom; background-position: left; background-position: right; background-position: center; /* <процент> значения */ background-position: 25% 75%; /* <отрезок> значения */ background-position: 0 0; background-position: 1cm 2cm; background-position: 10ch 8em; /* Несколько изображений */ background-position: 0 0, center; /* Значения смещения края */ background-position: bottom 10px right 20px; background-position: right 3em bottom 10px; background-position: bottom 10px right; background-position: top right 10px; /* Глобальные значения */ background-position: inherit; background-position: initial; background-position: unset; 

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

Значения

<position>

<position>. Позиция определяет координату x/y, чтобы разместить элемент относительно границ поля элемента. Она может быть определена с использованием одного и двух значений. Если используются два значения, первое значение предоставляет горизонтальную позицию, а второе представляет вертикальную позицию. Если указано только одно, второе значение считается center.Синтаксис 1-значения: значение может быть:

• Значение ключевого слова center, которое центрирует изображение.
• Одно из значений ключевых слов top, left, bottom, right. Оно указывает край, на который следует поместить элемент. Затем для другого измерения устанавливается значение 50%, таким образом элемент размещается в середине указанного края.
• <length> или <percentage>. Оно указывает координату X относительно левого края, с координатой Y установленной на 50%. Синтаксис с 2-значениями: одно из значений определяет X, а другое определяет Y. Каждое значение может быть:
  • Одно из значений ключевых слов top, left, bottom, right. Если здесь указаны left или right, то оно определяет X, а другое заданное значение определяет Y. Если даны top или bottom, то оно определяет Y, а другое значение определяет X.
• <length> или <percentage>. Если другое значение является left или right, то оно определяет Y, относительно верхнего края. Если другое значение top или bottom, то оно определяет X, относительно левого края. Если оба значения <length> или <percentage>, то первое определяет X, а второе Y.Обратите внимание,что:
  • Если одно значение top или bottom, то другое значение не может быть top или bottom.
• Если одно значение является left или right, то другое значение не может быть left или right.Это означает, например, что top top и left right являются недействительные.

Официальный синтаксис

background-position = 
 <bg-position># 

<bg-position> = 
 <position> |
 <position-three> 

<position> = 
 <position-one> |
 <position-two> |
 <position-four> 

<position-three> = 
 [ left | center | right ] && [ [ top | bottom ] <length-percentage> ] |
 [ [ left | right ] <length-percentage> ] && [ top | center | bottom ] 

<position-one> = 
 left |
 center |
 right |
 top |
 bottom |
 x-start |
 x-end |
 y-start |
 y-end |
 block-start |
 block-end |
 inline-start |
 inline-end |
 <length-percentage> 

<position-two> = 
 [ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ] |
 [ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] |
 [ block-start | center | block-end ] && [ inline-start | center | inline-end ] |
 [ start | center | end ]{2} 

<position-four> = 
 [ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ] |
 [ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ] |
 [ [ start | end ] <length-percentage> ]{2} 

<length-percentage> = 
 <length> |
 <percentage> 

Примеры

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

HTML

<div class="exampleone">Example One</div> <div class="exampletwo">Example Two</div> <div class="examplethree">Example Three</div> 

CSS

/* Общий среди всех <div>-ов */ div { background-color: #ffee99; background-repeat: no-repeat; width: 300px; height: 80px; margin-bottom: 12px; } /* В этих примерах используется сокращённое свойство 'background' */ .exampleone { background: url("star-transparent.gif") #ffee99 2.5cm bottom no-repeat; } .exampletwo { background: url("star-transparent.gif") #ffee99 left 4em bottom 1em no-repeat; } /* Несколько фоновых изображений: каждое изображение сопоставляется с соответствующей позицией, от первого указанного до последнего. */ .examplethree { background-image: url("star-transparent.gif"), url("cat-front.png"); background-position: 0px 0px, right 3em bottom 2em; } 

Результат

Спецификации

Совместимость с браузерами

Quantum CSS заметки

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

Смотрите также

• background-position-x
• background-position-y
• background-position-inline
• background-position-block
• Использование нескольких значений
• transform-origin