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; /* Измените размер фонового изображения, чтобы оно покрывало весь контейнер */
}
Попробуйте сами »
Страницы по теме background-position
CSS Учебник: CSS Background
CSS Справочник: background-image свойство
HTML DOM справочник: backgroundPosition свойство