background-position

СSS Свойство background-position

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

Совет: По индексу, элемент background-image размещается в верхнем левом углу, причем повторяется как по вертикали, так и по горизонтали.

Значение по умолчанию:	0% 0%
Унаследованный:	нет
Анимируемый:	да. Прочитать о animatable Попробуйте сами
Версия:	CSS1
JavaScript синтаксис:	object.style.backgroundPosition=»center» Попробуйте сами

Поддержка браузеров

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

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

CSS Синтаксис

Значение свойств

Значение	Описание	Воспроизвести
left top left center left bottom right top right center right bottom center top center center center bottom	Если вы укажете только одно ключевое слово, другое значение будет «center»	Воспроизвести »
x% y%	Первое значение — оризонтальное положение, а второе — вертикальное. Верхний левый угол равен 0% 0%. Правый нижний угол составляет 100% 100%. Если вы укажете только одно значение, другое значение будет равно 50%. Значение по умолчанию равен: 0% 0%	Воспроизвести »
xpos ypos	Первое значение — горизонтальное положение, а второе — вертикальное. Верхний левый угол равен 0 0. Единицы измерения могут быть пикселями (0px 0px) или любыми другими CSS units. Если вы укажете только одно значение, другое значение будет равно 50%. Вы можете смешивать % и позиции.	Воспроизвести »
initial	Задает этому свойству значение индекса. Прочитать о initial	Воспроизвести »
inherit	Наследует это свойство от родительского элемента. Прочитать о inherit

Примеры

Пример

Как расположить фоновое изображение по центру сверху:

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

Пример

Как расположить фоновое изображение, чтобы быть внизу справа:

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

Пример

Как расположить фоновое изображение с помощью процента:

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

Пример

Как расположить фоновое изображение с помощью пикселей:

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

Связанные страницы

Мы только что запустили
SchoolsW3 видео

ВЫБОР ЦВЕТА

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

Получить сертификат

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Источник

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

The background-position property in CSS allows you to move a background image (or gradient) around within its container.

The default values are 0 0 . This places your background image at the top-left of the container.

Length values are pretty simple: the first value is the horizontal position, second value is the vertical position. So 100px 5px will move the image 100px to the right and five pixels down. You can set length values in px , em , or any of the other CSS length values.

Percentages work a little differently. Get your math hats out: moving a background image by X% means it will align the X% point in the image to the X% point in the container. For example, 50% means it will align the middle of the image with the middle of the container. 100% means it will align the last pixel of the image with the last pixel of the container, and so on.

Keywords are just shortcuts for percentages. It’s easier to remember and write top right than 0 100% , and that’s why keywords are a thing. Here is a list of all five keywords and their equivalent values:

• top : 0% vertically
• right : 100% horizontally
• bottom : 100% vertically
• left : 0% horizontally
• center : 50% horizontally if horizontal isn’t already defined. If it is then this is applied vertically.

It’s interesting to note that it doesn’t matter what order you use for the keywords: top center is the same as center top . You can only do this if you’re exclusively using keywords, though. center 10% is not the same as 10% center .

This demo shows examples of background-position set with length units, percentages, and keywords.

You can give background-position up to four values in modern browsers:

• If you declare one value, that value is the horizontal offset. The browser sets the vertical offset to center .
• When you declare two values, the first value is the horizontal offset and the second value is the vertical offset.

Things get a little trickier when you start using three or four values, but you also get more control over your background placement. A three- or four-value syntax alternates between keywords and length or percentage units. You can use any of the keyword values except center in a three- or four-value background-position declaration.

When you specify three values, the browser interpets the “missing” fourth value as 0. Here’s an example of a three-value background-position :

This positions the background image 45px from the right and 0px from the bottom of the container.

Here’s an example of a four-value background-position :

This puts the background image 45px from the right and 20px from the bottom of the container.

Notice the order of the values in the examples above: keywords followed by length units. A three- or four-value background-position must follow that format, with a keyword preceding a length or percentage unit.

This demo includes examples of one value, two value, three value, and four value background-position .

The basic values are supported everywhere. The four-value syntax has this support:

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Mobile / Tablet

That’s the same level of support as the background-position-x and background-position-y properties.

Источник