CSS background-position Свойство
Пример
Как разместить фоновое изображение:
body
{
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Подробнее примеры ниже.
Определение и использование
Свойство background-position
задает начальную позицию фонового изображения.
Совет: По умолчанию фоновое изображение помещается в верхний левый угол элемента и повторяется как по вертикали, так и по горизонтали.
Значение по умолчанию: | 0% 0% |
---|---|
Inherited: | no |
Animatable: | yes. Читайте о animatable |
Version: | CSS1 |
Синтаксис JavaScript: | object.style.backgroundPosition="center" |
Поддержка браузера
Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
Свойство | |||||
---|---|---|---|---|---|
background-position | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: IE8 and earlier do not support multiple background images on one element.
Синтаксис CSS
background-position: value;
Значения свойств
Значение | Описание | |
---|---|---|
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-единицами. Если указано только одно значение, другое значение будет 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;
}
Похожие страницы
CSS Справочник: CSS Background
CSS Справка: background-image Свойство
HTML DOM Справочник: backgroundPosition Свойство