Позиционирование фона CSS background-position

У свойства background-position два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.

top left = left top = 0% 0% (в левом верхнем углу)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)

В скобках указано, где располагается фоновый рисунок относительно контейнера.

Пример 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>

Синтаксис HTML

<table style="width:100%;">
<tr style="height:200px;">
    <td style="background-image: url(/images/fon.gif);
background-repeat:repeat;
background-position:50% 50%;">
Первый экземпляр изображения располгается по центру области элемента.
Тиражирование изображения по горизонтали и вертикали. Значение repeat.
    </td>
    <td style="background-image: url(/images/fon.gif);
background-repeat:repeat-x;
background-position:50% 50%;">
Первый экземпляр изображения распологается по центру области элемента.
Первый экземпляр изображения распологается по центру области элемента.
Тиражирование изображения по горизонтали. Значение repeat-x
    </td>
</tr>
<tr style="height:200px;">
    <td style="background-image: url(/images/fon.gif);
background-repeat:repeat-y;
background-position:50% 50%;">
Первый экземпляр изображения распологается по центру области элемента.
Тиражирование изображения по вертикали. Значение repeat-y
    </td>
    <td style="background-image: url(/images/fon.gif);
background-repeat:no-repeat;
background-position:50% 50%;">
Первый экземпляр изображения распологается по центру области элемента.
Изображения не повторяется. Значение no-repeat
    </td>
</tr>
</table>

•