Отправляет email-рассылки с помощью сервиса Sendsay
  Все выпуски  

dimok.ru :: дизайн, верста, оптимизация для поисковых систем


Информационный Канал Subscribe.Ru


Позиционирование фонового изображения (background-position) с помощью CSS - dimok.ru :: дизайн, верстка, продвижение сайта Rambler's Top100

Позиционирование фонового изображения (background-position) с помощью CSS

Этот прием очень часто используется на сайтах, создаваемых профессиональными студиями.

Предположим, что я нарисовал фоновую картинку и хочу, чтобы она всегда в центре некоторой ячейки таблицы, т.е. при изменении размеров экрана, а соответственно и ячейки, у которой моя картинка является фоном, фоновое изображение обрезается по краям.

Я нарисовал такую картинку:

Допустим у нас есть ячейка таблицы с фоновым изображением:

 

Вот код:

<table width="440" border="0" cellspacing="0" cellpadding="0" height="66" class="border">
<tr>
<td valign="middle" align="center" background="less05_1.gif">&nbsp;
</td>
</tr>
</table>

Если уменьшить размеры ячейки, то получится нечто подобное:

 

В данном случае я всего лишь изменил ширину таблицы до 360 пикселей. И вижу на экране совсем не то, что хотелось бы. А хотелось бы получить вот что:

 

Во! Другое дело. Я добился этого результата изменив параметры тега <td> следующим образом:

<td valign="middle" align="center" background="less05_1.gif" style=""background-position:" center middle">

В спецификации CSS2 определен параметр background-position, определяющий положение левой и верхней границ фонового изображения.

Синтаксис:

[<проценты> | <длина>]{1,2} | [top | center | bottom ] || [left | center | right]

Значения по умолчанию: 0% 0%.

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

Если у вас возникнут проблемы появятся предложения, вы можете задать любой вопрос в форуме или по электронной почте dimok@tula.net

Также на сайте

Тег Meta Keywords больше уже не важен для поисковых систем. Важен ли тег Meta Description? Или стал ли он менее важен?

Как правильно создавать ImageMap (карта изображения)

Динамическая панель навигации

Раскрашиваем полосы прокрутки

Центрирование с помощью фреймов

Центрирование с помощью таблицы

Как рождается идея?

Все права принадлежат Голополосову Дмитрию. 2000-2003. http://dimok.ru    dimok@tula.net


Rambler's Top100


http://subscribe.ru/
E-mail: ask@subscribe.ru
Отписаться
Убрать рекламу

В избранное