background-position

Пример

Как расположить фоновое изображение:

body {
  background-image: url('sw3css.gif');
background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}

Попробуйте сами »

Определение background-position

CSS свойство background-position определяет начальную позицию фонового изображения.

Совет: По умолчанию background-image размещается в верхнем левом углу элемента и повторяется как по вертикали, так и по горизонтали.

Показ демо ❯

Значение по умолчанию:	0% 0%
Унаследовано:	no
Анимируемый:	yes. Читайте о animatable Попробуй
Версия:	CSS1
JavaScript синтаксис:	object.style.backgroundPosition="center" Попробуй

Поддержка background-position

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает это свойство.

Свойство
background-position	1.0	4.0	1.0	1.0	3.5

Синтаксис background-position

background-position: value;

Значения background-position

Значение	Описание	Демонстрация
left top left center left bottom right top right center right bottom center top center center center bottom	Если вы укажете только одно ключевое слово, другим значением будет "center"	Демо ❯
x% y%	Первое значение - это горизонтальное положение, а второе значение - вертикальное. Верхний левый угол равен 0% 0%. Правый нижний угол равен 100% 100%. Если вы укажете только одно значение, другое значение будет равно 50%. Значение по умолчанию: 0% 0%	Демо ❯
xpos ypos	Первое значение - это горизонтальное положение, а второе значение - вертикальное. Верхний левый угол равен 0 0. Единицами измерения могут быть пиксели (0px 0px) или любые другие единицы измерения CSS. Если вы укажете только одно значение, другим значением будет 50%. Вы можете смешивать % и позиции	Демо ❯
initial	Устанавливает для этого свойства значение по умолчанию. Читайте о initial
inherit	Наследует это свойство от своего родительского элемента. Читайте о inherit

Примеры background-position

Пример

Как расположить фоновое изображение так, чтобы оно было по центру вверху:

body {
background-image: url('sw3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
}

Попробуйте сами »

Пример

Как расположить фоновое изображение так, чтобы оно было внизу справа:

body {
background-image: url('sw3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
}

Попробуйте сами »

Пример

Как расположить фоновое изображение с помощью процента:

body {
background-image: url('sw3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}

Попробуйте сами »

Пример

Как расположить фоновое изображение с помощью пикселей:

body {
background-image: url('sw3css.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 150px;
}

Попробуйте сами »

Пример

Используйте различные свойства фона для создания изображения "hero":

.hero-image {
background-image: url("photographer.jpg"); /* Используемое изображение */
background-color: #cccccc; /* Используется, если изображение недоступно */
height: 500px; /* Вы должны установить указанную высоту */
background-position: center; /* Центрируйте изображение */
background-repeat: no-repeat; /* Не повторяйте изображение */
background-size: cover; /* Измените размер фонового изображения, чтобы оно покрывало весь контейнер */
}

Попробуйте сами »