CSS background-image

CSS позиция изображения-фона

Урок 12. Позиционируем изображение-фон при помощи CSS

CSS атрибуты, определяющие изображение-фон и его позицию

Содержание страницы

  1. Пример позиционирования изображения-фона
  2. Фон и фоновое изображение для блока

Пример CSS позиционирования изображения-фона:

<head>
<title>Пример</title>
<style type="text/css">
body {
background-image:url(../images/cvetok.png);
background-repeat:no-repeat;
background-position:center 80px
}
</style>
</head>
<body>
<p>Даже при изменении размеров окна,
фоновое изображение все равно останется в центре.</p>
</body>

background-position определяет горизонтальное (1-е значение) и вертикальное (2-е значение) позиционирование изображения-фона. В результате позиционирования изображение-фон будет установлено по центру страницы, по горизонтали и на расстоянии 80px сверху по вертикали. Значения атрибута background-position могут быть определены в пикселях, в процентах или терминами: left, right, center, bottom, top.

Результат: позиционируем изображение-фон при помощи CSS

Изображение-фон изменяет свою позицию относительно границ элемента, внутри которого оно находится, то есть это могут быть границы окна web-браузера, границы ячейки таблицы или блока <div> </div>.

CSS фон и фоновое изображение для блока

Пример:

<head>
<title>Пример</title>
<style type="text/css">
body {
background-color:#66cc66
}
#name {
margin:0 auto;
width:550px;
height:300px;
padding:30px;
border:3px solid #ffff00;
background-color:#ffdd00;
background-image:url(../images/cvetok2.png);
background-repeat:no-repeat;
background-position:100px 100px;
color:#ffffff
}
</style>
</head>
<body>
<div id="name">Текст описуемого блока</div>
</body>

Результат: фон и фоновое изображение для блока на примере CSS

Атрибуты и значения

Что касается механизма позиционирования, то его можно описать так: верхний левый угол блока является началом воображаемой системы координат (0). Верхняя и левая границы соответственно оси x и y. 100 пикселей по горизонтали и 100 пикселей по вертикали определяют координату верхнего левого угла изображения-фона. Вот и все...

Aтрибуты margin, padding, border, width, height подробно рассматриваются в следующих уроках.

Блоки <div> </div>, манипулируемые CSS, способны на многое. Они активно используются при верстке, учавствуют в дизайнерском оформлении web-страниц.

Код из верхнего примера можно напечатать более коротко:

<head>
<title>Пример</title>
<style type="text/css">
body {
background-color:#66cc66
}
#name {
margin:0 auto;
width:550px;
height:300px;
padding:30px;
border:3px solid #ffff00;
background:#ffdd00 url(../images/cvetok2.png) no-repeat 100px 100px;
color:#ffffff
}
</style>
</head>
<body>
<div id="name">Текст описуемого блока</div>
</body>

Результат будет аналогичен предыдущему: фон и фоновое изображение для блока

background объединяет в себе все свойства фона.


Очередность записи значений следующая:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

Не обязательно использовать все значения background, но последовательность должна быть учтена. В примере выше отсутствует атрибут background-attachment, который подробно рассмотрен в следующем уроке.

Дата публикации: Октябрь 2009 | Обновление: Август 2014

Урок 11. CSS фон-картинка   CSS позиция фона   Урок 13. CSS фиксирование

    Сохранить в сервисы и закладки