Wiki-учебник по веб-технологиям: HTML/ФоновыеИзображения ...

Главная | |

Фоновые изображения в HTML

Фон, это та же картинка, только загнанная под текст и другие картинки. Фон нельзя выделить мышкой, в отличие от картинок, выделяемых вместе с текстом. В этом одновременно его преимущество и недостаток – в некоторых случаях. Фон простирается в пределах тега таблицы или же всей странички, если указан в теге <body>. Первое, конечно, предпочтительнее.
Прописываем фон:

<td background="/картинка фона.gif">

– фоном может быть любая картинка. Вот только став фоном она приобретет интересные возможности.
Например, как вы думаете сделаны дырдочки по краям этого клетчатого «листа»? Это не длинная картинка, это один небольшой квадратик с одной «дырочкой». Просто, как и всякий фон, он многократно размножается по всей площади наделенного фоном тега. Так же сделана и тень от листа – темная полоска по краю – это всего лишь состоящий из четырех-пяти точек (пикселей) микрорисуночек.
Естественно, если я бы не назначил четкую ширину полям с этим фоном, у меня бы получилось тиражирование фонового изображения не только вверх, но и в стороны:



В чем удобство фона, кроме многими ругаемого «украшательства»? Да в том, что правильно подобранный фон, мелкие, не затрудняющие загрузку детали-»примочки» и прочее, что у нас принято именовать гордым словом «дизайн», призвано скрасить однообразие, облегчить восприятие и вообще... С ним приятнее. Хотя, конечно, и без него можно обойтись. Модно просто назначить таблице какой-либо однотонный цвет и довольствоваться этим. Фоном не стоит злоупотреблять – оптимально, чтобы вся графика на странице, все украшательства не весили больше 30 кб. И то это много... У меня, например, все эти бирюльки-дырочки, клетчатый фон и прочее весит чуток более 8 кб. Лишняя секунда загрузки практически не заметна, а глаз не «тонет» в пустоте белого, серого или черного фона. Фон, как и картинки, можно сделать анимированным, например, флэшем, но для начала лучше .gif`ом, поскольку он наиболее прост и легок в изготовлении.

Да, если вы столкнетесь с неумелым использованием фона и текст, на нем расположенный, будет трудночитаем, советую его просто выделить мышкой и читать в темном выделении – увы, только так можно спасти свои глаза от надругательства многими современными «вебмастерами».

Из фона можно изготавливать и рамочки и уголки к ним – закругленные, завернутые и всяко-разные другие. Главное, не переборщить с наворотами, чтобы они не оттягивали на себя чересчур много внимания – особенно это касается частенько встречающейся назойливой непрекращающейся анимации всем давно опостылевшего файла с анимашкой, который можно найти на сотнях тысяч дилетантских страничек начинающих вебоделов.
Совет – фон старайтесь ориентировать либо вертикально, либо горизонтально. Это упростит растягивание в ту или иную сторону, чтобы дизайн наш при стискивании или растягивании окошка не «плыл».
При назначении фона вполне можно ограничиться картинкой со стороной 1 пиксель на 5–15.
Конечно, кроме перечисленных свойств, у фоновых изображений огромное количество возможностей, но подробности – в разделе «стили»