Я люблю дизайнеров, которые рисуют «невозможные» сайты. Это не даёт закиснуть, заставляет искать новые решения вёрстки. Одним из таких решений стало применение «резинового неповторяющегося фона».
Решение основано на взаимосвязи вертикальной и горизонтальной координаты у изображения. Говоря иными словами, если у картинки указать только высоту, то ширина изменится согласно исходным пропорциям.
Суть идеи в том, что небольшое по размеру (и по объёму) фоновое изображение вставляется не через таблицу стилей в body, а непосредственно через тег img на странице сайта.
HTML:
<
CSS:
Наглядная реализация метода: http://marow.ru/site/sadik/40/
Плюс такого способа вставки фонового изображения в уменьшении размера исходной картинки. Это не относится к изображениям, от которых требуется высокая чёткость. Хотя как показывает практика, фоновое изображение в большинстве случаев, нечто размытое и аморфное.
Минус же в том, что этот способ не соответствует соображениям семантичности и разделения структуры от содержания.
Также утрачивается возможность указать значения margin и padding у тега body. Иначе картинка будет растягиваться не на весь экран.
О главном.
В ie6 при наведении на фон, созданный таким способом, появляется окно ImageToolbar, которое портит всё впечатление от содеянного. Благо, что сие решается довольно безболезненно. Достаточно установить в «голову» сайта мета-тег, который запрещает появление ImageToolbar на всей площади страницы:
<
Кроме применения в качестве фонового изображения эффект зависимости высоты и ширины можно применить при необходимости создания блока высота которого будет меняться в зависимости от его ширины (например при масштабировании страницы). Достаточно просто поместить внутрь этого блока прозрачное изображение с заданными пропорциями.
Пример.
Решение основано на взаимосвязи вертикальной и горизонтальной координаты у изображения. Говоря иными словами, если у картинки указать только высоту, то ширина изменится согласно исходным пропорциям.
Суть идеи в том, что небольшое по размеру (и по объёму) фоновое изображение вставляется не через таблицу стилей в body, а непосредственно через тег img на странице сайта.
HTML:
<
img src="url" class="body-img" alt="" title=""
/>CSS:
.body-img{
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
}
Наглядная реализация метода: http://marow.ru/site/sadik/40/
Плюс такого способа вставки фонового изображения в уменьшении размера исходной картинки. Это не относится к изображениям, от которых требуется высокая чёткость. Хотя как показывает практика, фоновое изображение в большинстве случаев, нечто размытое и аморфное.
Минус же в том, что этот способ не соответствует соображениям семантичности и разделения структуры от содержания.
Также утрачивается возможность указать значения margin и padding у тега body. Иначе картинка будет растягиваться не на весь экран.
О главном.
В ie6 при наведении на фон, созданный таким способом, появляется окно ImageToolbar, которое портит всё впечатление от содеянного. Благо, что сие решается довольно безболезненно. Достаточно установить в «голову» сайта мета-тег, который запрещает появление ImageToolbar на всей площади страницы:
<
meta http-equiv="imagetoolbar" content="no"
/>Кроме применения в качестве фонового изображения эффект зависимости высоты и ширины можно применить при необходимости создания блока высота которого будет меняться в зависимости от его ширины (например при масштабировании страницы). Достаточно просто поместить внутрь этого блока прозрачное изображение с заданными пропорциями.
Пример.