Zano.ru




Рейтинг@Mail.ru


Главная / Позиционирование фона CSS background-position

Позиционирование фона 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>




 
E-Mail: zanoru@yandex.ru