background-position

CSS background-position Property

The background-position property sets the starting position of a background image.

Tip: By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.

Default value:	0% 0%
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS1
JavaScript syntax:	object.style.backgroundPosition=»center» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Value	Description	Demo
left top left center left bottom right top right center right bottom center top center center center bottom	If you only specify one keyword, the other value will be «center»	Demo ❯
x% y%	The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value is: 0% 0%	Demo ❯
xpos ypos	The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

How to position a background-image to be centered at top:

body <
background-image: url(‘w3css.gif’);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
>

Example

How to position a background-image to be bottom right:

body <
background-image: url(‘w3css.gif’);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
>

Example

How to position a background-image using percent:

body <
background-image: url(‘w3css.gif’);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
>

Example

How to position a background-image using pixels:

body <
background-image: url(‘w3css.gif’);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 150px;
>

Example

Use different background properties to create a «hero» image:

.hero-image <
background-image: url(«photographer.jpg»); /* The image used */
background-color: #cccccc; /* Used if the image is unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
>

Источник

background-position

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

Синтаксис

background-position: [left | center | right | | ] || [top | center | bottom | | ] | inherit

= [left | center | right | | ] || [top | center | bottom | | ] | inherit.

Значения

У свойства background-position два значения, положение по горизонтали (может быть — left , center , right ) и вертикали (может быть — top , center , bottom ). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.

• top left = left top = 0% 0% (в левом верхнем углу)
• top = top center = center top = 50% 0% (по центру вверху)
• right top = top right = 100% 0% (в правом верхнем углу)
• left = left center = center left = 0% 50% (по левому краю и по центру)
• center = center center = 50% 50% (по центру)
• right = right center = center right = 100% 50% (по правому краю и по центру)
• bottom left = left bottom = 0% 100% (в левом нижнем углу)
• bottom = bottom center = center bottom = 50% 100% (по центру внизу)
• bottom right = right bottom = 100% 100% (в правом нижнем углу)

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

При inherit значение наследуется у родителя элемента.

XHTML 1.0 CSS2.1 IE Cr Op Sa Fx

       
.
  

HTML5 CSS3 IE Cr Op Sa Fx

Объектная модель

[window.]document.getElementById(» elementID «).style.backgroundPosition

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

CSS по теме

Источник

background-position

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

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

Синтаксис

/* Ключевые значения */ 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 указывается в виде одного или нескольких значений , разделённых запятыми.

Значения

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

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

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

  background-position =
  # (en-US)

  =
  [ (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom | (en-US) ] (en-US) | (en-US)
  [ (en-US) left | (en-US) center | (en-US) right | (en-US) ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) ] (en-US) | (en-US)
  [ (en-US) center | (en-US) [ (en-US) left | (en-US) right ] (en-US) ? (en-US) ] (en-US) && (en-US) [ (en-US) center | (en-US) [ (en-US) top | (en-US) bottom ] (en-US) ? (en-US) ] (en-US)

  =
  | (en-US)

  Примеры

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

  HTML

  div class="exampleone">Example Onediv> div class="exampletwo">Example Twodiv> div class="examplethree">Example Threediv> 

  CSS

  /* Общий среди всех -ов */ div  background-color: #FFEE99; background-repeat: no-repeat; width: 300px; height: 80px; margin-bottom: 12px; > /* В этих примерах используется сокращённое свойство 'background' */ .exampleone  background: url("startransparent.gif") #FFEE99 2.5cm bottom no-repeat; > .exampletwo  background: url("startransparent.gif") #FFEE99 3em 50% no-repeat; > /* Несколько фоновых изображений: каждое изображение сопоставляется с соответствующей позицией, от первого указанного до последнего. */ .examplethree  background-image: url("startransparent.gif"), url("catfront.png"); background-position: 0px 0px, center; > 

  Результат

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

  • background-position-x : Список, каждый элемент которого состоит из: смещения, данного комбинацией абсолютной длины и процентов плюс ключевое слово
  • background-position-y (en-US): Список, каждый элемент которого состоит из: смещения, данного комбинацией абсолютной длины и процентов плюс ключевое слово

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

  BCD tables only load in the browser

  Quantum CSS заметки

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

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

  Found a content problem with this page?

  This page was last modified on 15 дек. 2022 г. by MDN contributors.

  Your blueprint for a better internet.

  Источник

  background-position¶

  Свойство background-position задаёт начальное положение фонового изображения, установленного с помощью свойства background-image .

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

  Демо¶

  • background
  • background-attachment
  • background-blend-mode
  • background-clip
  • background-color
  • background-image
  • background-origin
  • background-position
  • background-position-x
  • background-position-y
  • background-repeat
  • background-size

  Синтаксис¶

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

  /* Keyword values */ background-position: top; background-position: bottom; background-position: left; background-position: right; background-position: center; /* values */ background-position: 25% 75%; /* values */ background-position: 0 0; background-position: 1cm 2cm; background-position: 10ch 8em; /* Multiple images */ background-position: 0 0, center; /* Edge offsets values */ background-position: bottom 10px right 20px; background-position: right 3em bottom 10px; background-position: bottom 10px right; background-position: top right 10px; /* Global values */ background-position: inherit; background-position: initial; background-position: unset; 

  Значения¶

  У свойства background-position два значения, положение по горизонтали (может быть — left , center , right ) и вертикали (может быть — top , center , bottom ). Кроме использования ключевых слов положение также можно задавать в процентах, пикселях или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задаётся положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.

  • top left = left top = 0% 0% (в левом верхнем углу)
  • top = top center = center top = 50% 0% (по центру вверху)
  • right top = top right = 100% 0% (в правом верхнем углу)
  • left = left center = center left = 0% 50% (по левому краю и по центру)
  • center = center center = 50% 50% (по центру)
  • right = right center = center right = 100% 50% (по правому краю и по центру)
  • bottom left = left bottom = 0% 100% (в левом нижнем углу)
  • bottom = bottom center = center bottom = 50% 100% (по центру внизу)
  • bottom right = right bottom = 100% 100% (в правом нижнем углу)

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

  Применяется ко всем элементам

  Источник