- background-position
- Синтаксис
- Значения
- Объектная модель
- Браузеры
- CSS по теме
- background — position
- Кратко
- Пример
- Как пишется
- Ключевые слова
- Пиксели или другие единицы измерения длины
- Проценты
- Подсказки
- На практике
- Алёна Батицкая советует
- background-position
- Интерактивный пример
- Синтаксис
- Значения
- Официальный синтаксис
- Примеры
- HTML
- CSS
- Результат
- Спецификации
- Совместимость браузеров
- Quantum CSS заметки
- Смотрите также
- Found a content problem with this page?
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
Фоновая картинка подчиняется этому свойству и занимает нужную позицию.
Время чтения: меньше 5 мин
Обновлено 20 декабря 2021
Кратко
Скопировать ссылку «Кратко» Скопировано
При помощи свойства background — position можно управлять положением фоновой картинки внутри элемента.
Если фоновая картинка ( background — image ) меньше, чем элемент, и автоматическое повторение фона ( background — repeat ) отключено, то по умолчанию она расположится в левом верхнем углу.
Пример
Скопировать ссылку «Пример» Скопировано
div class="element">div>
.element background-color: #49a16c; background-image: url("doggo.png"); background-repeat: no-repeat;>
.element background-color: #49a16c; background-image: url("doggo.png"); background-repeat: no-repeat; >
Как видно в примере, маленькая картинка с персонажем располагается в левом верхнем углу. Но по логике это изображение нам нужно расположить в правом нижнем углу.
Для этого мы изменим значение свойства background — position на нужное нам: 100 % 100 % или bottom right . Они равнозначны.
.element background-position: 100% 100%;>
.element background-position: 100% 100%; >
Или при помощи ключевых слов:
.element background-position: bottom right;>
.element background-position: bottom right; >
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Ключевые слова
Скопировать ссылку «Ключевые слова» Скопировано
Доступны слова center , bottom , left , right . Их можно комбинировать, например: left center — по центру левой стороны; right bottom — правый нижний угол. Если хотим расположить картинку по центру по горизонтали и вертикали, второе слово center можно опустить.
.element background-position: left top;>
.element background-position: left top; >
.element background-position: center;>
.element background-position: center; >
По центру по горизонтали и у нижнего края:
.element background-position: center bottom;>
.element background-position: center bottom; >
Пиксели или другие единицы измерения длины
Скопировать ссылку «Пиксели или другие единицы измерения длины» Скопировано
Можно указать конкретное положение картинки в блоке.
10 px от левого края и 150 px от верхнего края:
.element background-position: 10px 150px;>
.element background-position: 10px 150px; >
1 rem от левого края и по центру между верхом и низом:
.element background-position: 1rem;>
.element background-position: 1rem; >
15 единиц ширины от левого края и 25 единиц высоты от верха:
.element background-position: 15vw 25vh;>
.element background-position: 15vw 25vh; >
Проценты
Скопировать ссылку «Проценты» Скопировано
Для этого свойства проценты рассчитываются необычным для CSS образом: от разницы между размером элемента и размером самой фоновой картинки. Сдвиг картинки на 50 % , то есть на половину этой разницы, центрирует её по соответствующей оси. Значение 0 % 0 % ставит картинку в левый верхний угол, а 100 % 100 % — в правый нижний.
.element background-position: 100% 100%;>
.element background-position: 100% 100%; >
.element background-position: 50% 50%;>
.element background-position: 50% 50%; >
.element background-position: 15% 5%;>
.element background-position: 15% 5%; >
Если развернуть запись 15 % 5 % подробнее, то станет понятнее, как работают проценты в этом случае:
- Слева от картинки 15% свободного места, а справа — оставшиеся 85%.
- Над картинкой 5% свободного места, а под ней — оставшиеся 95%.
Подсказки
Скопировать ссылку «Подсказки» Скопировано
💡 Свойство положения фона не наследуется.
💡 Ключевые слова можно указывать в любом порядке. В остальных случаях первая величина — это позиция по горизонтали, а вторая, если есть — по вертикали.
💡 Значение по умолчанию — 0% 0% (левый верхний угол).
💡 Если указано только одно значение, то второе подставляется автоматически и равняется 50 % . То есть значение 100 % расположит картинку по центру правого края.
💡 Если картинка больше блока, то разница их размеров, от которой отсчитываются проценты, оказывается отрицательной, поэтому они сдвигают картинку не вправо и вниз, а влево и вверх. Но 50 % 50 % и в этом случае совмещает центр картинки с центром элемента, а 100 % 100 % — правый нижний угол картинки с правым нижним углом элемента.
💡 Если картинка занимает всё пространство блока, то background — position с ключевыми словами или в процентах не возымеет никакого действия (проценты будут отсчитываться от нуля). Но его принято указывать, чтобы в случае замены картинки новое изображение располагалось по центру блока.
💡 Изменение положения фона можно анимировать при помощи свойства transition 🥳
На практике
Скопировать ссылку «На практике» Скопировано
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
🛠 В работе редко требуется располагать маленькие фоновые картинки в больших блоках. Сейчас принято делать красивые фоны на всю ширину. Но для любых фонов стоит указывать background — position : center или background — position : 50 % 50 % — в качестве подстраховки от фатальной поломки вёрстки.
🛠 Можно встретить такую запись: background — position : right 20px bottom 10px; . В этом случае отступ будет отсчитываться не от верхнего левого угла, а от указанной при помощи ключевого слова стороны. В данном случае картинка будет расположена в двадцати пикселях от правого края и в десяти пикселях от нижнего края.
🛠 Помимо перечисленных вариантов можно использовать функцию calc ( ) для указания более гибкого значения.
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.