Свойство background-position
Задает позиционирование фонового изображения элемента
background-position: center;
Пошаговый план! Как быстро научиться создавать сайты!
Chrome
Все
Edge
Все
FireFox
Все
IE
6+
iOS Safari
Все
Opera
Все
Safari
Все
Значения
background-position: 50% 50%;
Позиционирование фонового изображения в процентах относительно элемента. Первое значение - ось X, второе значение - ось Y
<style>
.example-1 {
height: 200px;
background-color: #dfedf3;
background-image: url(https://placem.at/places?w=200&h=150&txt=0&random=1);
background-position: 50% 50%;
background-repeat: no-repeat;
}
</style>
<div class="example-1"></div>
background-position: 25px 25px;
Позиционирование фонового изображения в пикселях относительно элемента. Первое значение - ось X, второе значение - ось Y
<style>
.example-2 {
height: 200px;
background-color: #dfedf3;
background-image: url(https://placem.at/places?w=200&h=150&txt=0&random=2);
background-position: 25px 25px;
background-repeat: no-repeat;
}
</style>
<div class="example-2"></div>
background-position: right center;
Позиционирование фонового изображения используя ключевые слова. Первое значение - ось X, второе значение - ось Y. Возможные значения top, right, bottom, left, center.
<style>
.example-3 {
height: 200px;
background-color: #dfedf3;
background-image: url(https://placem.at/places?w=200&h=150&txt=0&random=3);
background-position: right center;
background-repeat: no-repeat;
}
</style>
<div class="example-3"></div>
background-position: right 20px top 20px;
Позиционирование фонового изображения используя ключевые слова и значения (% или px). Значение определяет смещение фонового изображения относительно ключевого слова (top, right, bottom, left)
<style>
.example-4 {
height: 200px;
background-color: #dfedf3;
background-image: url(https://placem.at/places?w=200&h=150&txt=0&random=4);
background-position: right 20px top 20px;
background-repeat: no-repeat;
}
</style>
<div class="example-4"></div>