Background Position - Как Работает, Примеры Использования
Background position - это свойство CSS, позволяющее задать расположение фонового изображения на элементе.
Синтаксис:
background-position: X Y;
Значения X и Y могут быть заданы в процентах, пикселях или ключевых словах.
Примеры:
1. Задание фонового изображения и его положения по центру элемента:
HTML:
CSS:
.bg-image {
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: center;
width: 500px;
height: 300px;
}
2. Задание фонового изображения и его положения по координатам:
HTML:
CSS:
.bg-image {
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: 50px 100px;
width: 500px;
height: 300px;
}
В данном примере фоновое изображение будет смещено на 50 пикселей по горизонтали и 100 пикселей по вертикали.
3. Применение анимации к фону при смене положения:
HTML:
CSS:
.bg-image {
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: 0 0;
width: 500px;
height: 300px;
animation: slide 2s infinite alternate;
}
@keyframes slide {
from {
background-position: 0 0;
}
to {
background-position: -500px -300px;
}
}
В данном примере анимация будет происходить в течение 2 секунд и будет бесконечной. Ключевое слово alternate указывает на то, что анимация будет происходить туда-сюда. Анимация задает изменение положения фонового изображения от координат (0,0) до (-500,-300), что приведет к плавному сдвигу фона по горизонтали и вертикали.