Свойство 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>

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии