html.okpython.net
Основы создания сайтов
CSS :: Свойство background-position
css-свойство background-position (от англ. background position – расположение фона) определяет начальное положение фонового изображения, установленного свойством background-image.
Характеристики
- Значение по умолчанию: 0% 0%.
- Применяется: ко всем элементам.
- Наследуется: нет.
- Анимируется: да.
- JavaScript: object.style.backgroundPosition="value".
Синтаксис
background-position: <x>[, <y>]*, где
<x> = <размер> | <проценты> | left | center | right,
<y> = <размер> | <проценты> | top | center | bottom.
Значения
- x y – первое значение указывает позицию фонового изображения по горизонтали, а второе (через пробел) – по вертикали. В качестве координат могут приниматься любые доступные в CSS единицы измерения, а также проценты, в любом сочетании. При этом считается, что верхний левый угол задается координатами 0 0, например, 0px 0em. Если указано только одно значение, то второе принимается за 50%. Если координаты заданы в процентах, то нижний правый угол задается координатами 100% 100%.
- Ключевые слова – вместо координат разрешается использовать ключевые слова left (x=0%), center (x=50%), right (x=100%) вместо координаты x и top (y=0%), center (y=50%), bottom (y=100%) вместо координаты y. Например, center top соответствует паре координат в процентах 50% 0% и т.д.
Разрешается указывать через запятую несколько параметров в случае использования более одного фонового изображения.
Ссылки
Официальный сайт W3C: https://www.w3.org/TR/css-backgrounds-3/#the-background-position
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/background-position
Примеры
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: 30px 60%;} .background_2{background-position: 80% 2em} .background_3{background-position: center bottom;} </style> </head> <body> <p class="background_1">background-position: 30px 60%</p> <p class="background_2">background-position: 80% 2em</p> <p class="background_3">background-position: center bottom</p> </body> </html>
Пример №1