Добавляем фон в HTML

Добавляем фон в HTML

Фон в HTML

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

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

а поверх фона можно чего-нить написать!
главное, чтобы фон это не перекрывал

— вот он, этот самый фон. Кто особо любопытен, может попробовать сохранить его как картинку :0) Если получится. Конечно, придется покопаться в коде — если у вас Ехплорер :0) Ну а счастливым владельцам Мозиллы, конечно, достаточно глянуть «состав HTML», чтобы увидеть всю задействованную в нем графику с соответствующими линками.
В чем удобство фона, кроме многими ругаемого «украшательства»? Да в том, что правильно подобранный фон, мелкие, не затрудняющие загрузку детали-«примочки» и прочее, что у нас принято именовать гордым словом «дизайн», призвано скрасить однообразие, облегчить восприятие и вообще… С ним приятнее.

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

Да, если вы столкнетесь с неумелым использованием фона и текст, на нем расположенный, будет трудночитаем, советую его просто выделить мышкой и читать в темном выделении — увы, только так можно спасти свои глаза от надругательства многими современными «вебмастерами».
Из фона можно изготавливать и рамочки и уголки к ним — закругленные, завернутые и всяко-разные другие. Главное, не переборщить с наворотами, чтобы они не оттягивали на себя чересчур много внимания — особенно это касается частенько встречающейся назойливой непрекращающейся анимации всем давно опостылевшего файла с анимашкой, который можно найти на сотнях тысяч дилетантских страничек начинающих вебоделов.

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

print
logo

Если Вам понравилась статья, пожалуйста, поставьте лайк! Следите за новой информацией на нашем сайте.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

пять × один =