html.okpython.net
Основы создания сайтов
CSS :: Свойство background-position-x
css-свойство background-position-x (от англ. background position – расположение фона) определяет начальное положение фонового изображения, установленного свойством background-image, по горизонтали.
Характеристики
- Значение по умолчанию: left.
- Применяется: ко всем элементам.
- Наследуется: нет.
- Анимируется: да.
- JavaScript: object.style.backgroundPositionX="value".
Синтаксис
background-position-x: [<x> | <проценты> | left | center | right]#
Значения
- x – значение указывает позицию фонового изображения по горизонтали. В качестве координат могут приниматься любые доступные в CSS единицы измерения, а также проценты. При этом считается, что верхний левый угол задается координатой 0, например, 0px или 0%. Если координата x задана в процентах, то верхний правый и нижний правый углы задаются координатой 100%.
- Ключевые слова – вместо координаты x разрешается использовать ключевые слова left (x=0%), center (x=50%), right (x=100%).
Разрешается указывать через запятую несколько параметров в случае использования более одного фонового изображения.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-backgrounds-4/#background-position-longhands
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/background-position-x
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ padding: 3em; width: 300px; min-height: 40px; border: dashed green 12px; background-color: yellow; background-repeat: no-repeat; background-image: url("images/cabinet.png"); } /* Задаем х и у */ .background_1{ background-position-x: 30px; background-position-y: 60%; } .background_2{ background-position-x: 80%; background-position-y: 2em; } .background_3{ background-position-x: center; background-position-y: bottom; } </style> </head> <body> <p class="background_1"> background-position-x: 30px<br> background-position-y: 60% </p> <p class="background_2"> background-position-x: 80%<br> background-position-y: 2em </p> <p class="background_3"> background-position-x: center<br> background-position-y: bottom </p> </body> </html>
Пример №1