СSS Свойство background-position
Пример
Как расположить фоновое изображение:
body
{
background-image: url('w3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Попробуйте сами »
Определение и использование
Свойства background-position задает начальную позицию фонового изображения.
Совет: По индексу, элемент background-image размещается в верхнем левом углу, причем повторяется как по вертикали, так и по горизонтали.
| Значение по умолчанию: | 0% 0% |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | да. Прочитать о animatable Попробуйте сами |
| Версия: | CSS1 |
| JavaScript синтаксис: | object.style.backgroundPosition="center" Попробуйте сами |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| background-position | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Примечание: IE8 и более ранние версии не поддерживают несколько фоновых изображений на одном элементе.
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 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;
}
Попробуйте сами »
Связанные страницы
CSS учебник: CSS Background
CSS справочник: Свойства background-image
HTML DOM справочник: Свойства backgroundPosition
