Пример
Как расположить фоновое изображение по оси y:
div
{
background-image: url('sw3css.gif');
background-repeat: no-repeat;
background-position-y: center;
}
Попробуйте сами »
Определение background-position-y
CSS свойство background-position-y определяет положение фонового изображения по оси y.
Совет: По умолчанию фоновое изображение размещается в верхнем левом углу элемента и повторяется как по вертикали, так и по горизонтали.
| Значение по умолчанию: | 0% |
|---|---|
| Унаследовано: | no |
| Анимируемый: | yes. Читайте о animatable Попробуй |
| Версия: | CSS3 |
| JavaScript синтаксис: | object.style.backgroundPositionY="center" Попробуй |
Поддержка background-position-y
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| background-position-y | 1.0 | 12.0 | 49.0 | 1.0 | 15.0 |
| background-position-y (with two value syntax) |
Не поддерживается | Не поддерживается | 49.0 | 15.4 | Не поддерживается |
Синтаксис background-position-y
background-position-y: value;
Значения background-position-y
| Значение | Описание | Демонстрация |
|---|---|---|
| top | Позиционирует верхнюю часть фона по оси y. | Демо ❯ |
| bottom | Позиционирует нижнюю часть фона по оси y. | Демо ❯ |
| center | Размещает центр фона по оси y. | Демо ❯ |
| y% | Верхняя сторона равна 0% по оси y, а нижняя сторона равна 100%. Процентное значение относится к высоте области позиционирования фона минус высота фонового изображения. | Демо ❯ |
| ypos | Расстояние по вертикали от верхней стороны. Единицами измерения могут быть пиксели (0px) или любые другие CSS единицы измерения. | Демо ❯ |
| ypos offset | Синтаксис с двумя значениями, поддерживаемый только в Firefox и Safari. - ypos устанавливается либо в "верхнее", либо в "нижнее" положение. - offset это расстояние по вертикали от фонового изображения и "верхней" или "нижней" стороны, заданное с помощью ypos. Единицами измерения могут быть пиксели или любые другие CSS единицы измерения. |
|
| initial | Устанавливает для этого свойства значение по умолчанию. Читайте о initial | |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о inherit |
Примеры background-position-y
Пример
Как расположить фоновое изображение вверху:
body
{
background-image: url('sw3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position-y: bottom;
}
Попробуйте сами »
Пример
Как расположить фоновое изображение по оси y, используя проценты:
body
{
background-image: url('sw3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position-y: 50%;
}
Попробуйте сами »
Пример
Как расположить фоновое изображение по оси y с помощью пикселей:
body
{
background-image: url('sw3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position-y: 80px;
}
Попробуйте сами »
Страницы по теме background-position-y
CSS Учебник: CSS Background
CSS Справочник: background-image свойство
CSS Справочник: background-position свойство
CSS Справочник: background-position-x свойство
HTML DOM справочник: backgroundPosition свойство