Свойство background-position-x - позиция фона по горизонтали в CSS
Свойство background-position-x задает
местоположение фоновой картинки элемента
по горизонтали.
Свойство может принимать следующие значения:
left, center, right, а также
можно указать положение фона в процентах
или пикселях.
Синтаксис
селектор {
background-position-x: значение;
}
Пример
Давайте расположим фоновую картинку слева по горизонтали:
<div id="elem"></div>
#elem {
background-position-x: left;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Пример
А теперь давайте переместим фон вправо:
<div id="elem"></div>
#elem {
background-position-x: right;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Пример
Давайте разместим фоновую картинку в центре:
<div id="elem"></div>
#elem {
background-position-x: center;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Пример
А теперь укажем положение для фона в процентах:
<div id="elem"></div>
#elem {
background-position-x: 20%;
background-image: url("bg.png");
background-repeat: no-repeat;
width: 400px;
height: 300px;
border: 1px solid black;
}
:
Смотрите также
-
свойство
background,
представляющее собой свойство-сокращение для фона -
свойство
background-position-y,
которое задает позицию фона по вертикали