пример
Как позиционировать фоновое изображение:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
Попробуй сам " Больше "Try it Yourself" примеры ниже.
Определение и использование
Свойство фон положение задает начальное положение фонового изображения.
Tip: По умолчанию, фоновое изображение помещается в левый верхний угол элемента и повторяется как по вертикали , так и по горизонтали.
| Значение по умолчанию: | 0% 0% |
|---|---|
| Наследование: | no |
| Animatable: | yes. Read about animatable Try it |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object .style.backgroundPosition="center" Try it |
Поддержка браузеров
Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.
| Имущество | |||||
|---|---|---|---|---|---|
| background-position | 1,0 | 4.0 | 1,0 | 1,0 | 3.5 |
Note: IE8 и более ранние версии не поддерживают несколько фоновых изображений на одном элементе.
CSS Синтаксис
background-position:value;Значения свойств
| Стоимость | Описание | Сыграй |
|---|---|---|
| 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 | Устанавливает это свойство в значение по умолчанию. Читайте о первоначальный | Сыграй " |
| inherit | Наследует это свойство от своего родительского элемента. Читайте о унаследовать |
Еще примеры
пример
Как позиционировать фоновое изображение с помощью процентов:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 30% 20%;
}
Попробуй сам " пример
Как позиционировать фоновое изображение, используя пиксели:
body
{
background-image: url('smiley.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50px 100px;
}
Попробуй сам " Похожие страницы
Учебник CSS: CSS фона
Справка CSS: background-image property
HTML DOM ссылка: backgroundPosition property