Пример 1
Как позиционировать фоновое изображение:<html>
<head>
<meta charset="utf-8" />
<style>
body
{
background-image:url('/tryit/css/img/smiley.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>
</head>
<body>
<p><b>Примечание:</b> Для того, чтобы эт о работало в Firefox и Opera, свойство background-attachment должно быть установленно в "fixed".</p>
</body>
</html>
Определение и использование
Свойство background-position устанавливает начальную позицию фонового изображения.
Примечание: Для того, чтобы эт о работало в Firefox и Opera, свойство background-attachment должно быть установленно в "fixed".
| Значение по умолчанию: | 0% 0% |
|---|---|
| Унаследованный: | нет |
| Версия: | CSS1 |
| Синтакс JavaScript: | object.style.backgroundPosition="center" |
Поддержка браузеров
Свойство background-position поддерживается во всех ведущих браузерах.
Примечание: Ни одна из версий Internet Explorer (включая IE8) не поддерживает значение свойства "inherit".
Советы и примечания
Совет: Используйте цвет фона и цвет текста для того, чтобы сделать текст более легким для чтения.
Значения свойства
| Значение | Описание |
|---|---|
| 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%. Вы можете комбинировать % и позицию |
| inherit | Указывает, что настройка свойства background-position должна быть унаследованна из родительского элемента |
Еще примеры
Пример 2
Этот пример демонстрирует, как позиционировать фоновое изображение на странице с помощью процентов.<html>
<head>
<meta charset="utf-8" />
<style>
body
{
background-image:url('/tryit/css/img/smiley.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:30% 20%;
}
</style>
</head>
<body>
<p><b>Примечание:</b> Для того, чтобы это работало в Firefox и Opera, свойство background-attachment должно быть установленно в "fixed".</p>
</body>
</html>
Пример 3
Этот пример демонстрирует, как позиционировать фоновое изображение на странице используя пиксели.<html>
<head>
<meta charset="utf-8" />
<style>
body
{
background-image:url('/tryit/css/img/smiley.jpg');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:50px 70px;
}
</style>
</head>
<body>
<p><b>Примечание:</b> Для того, чтобы это работало в Firefox и Opera, свойство background-attachment должно быть установленно в "fixed".</p>
</body>
</html>
Была ли эта информация полезной?
