Фоновые рисунки
В связи с особенностями веб-страниц, фоновые рисунки приобретают значительную роль при верстке документов сайта. При этом они активно участвуют в самых разных делах, например, автоматизируют процесс присоединения рисунков к тексту, создают градиентные переходы и, конечно, добавляют фон под содержимым. Далее рассмотрены некоторые аспекты применения фоновых изображений.
Фон на веб-странице
Установка фонового рисунка на веб-страницу традиционно происходит через параметр background тега <BODY>. Такой рисунок повторяется по горизонтали и вертикали, заполняя таким способом все окно браузера. Понятно, что особых вариантов для творчества здесь нет, поэтому обратимся к стилям и посмотрим, что же можно делать с помощью CSS.
В CSS имеется пять атрибутов, которые управляют фоновой картинкой: ее добавлением, положением и повторением. Однако все эти параметры заменяет одно универсальное свойство background, его и будем использовать в дальнейшем.
Добавление фонового рисунка
Добавление рисунка происходит путем установки адреса картинки через ключевое слово url. Чтобы управлять повторением картинки применяются аргументы no-repeat (нет повторения), repeat-x (повторение по горизонтали) и repeat-y (повторение по вертикали). Благодаря этому можно получить веб-страницу, приведенную на рис. 1.
Рис. 1. Фоновая картинка без повторения
Чтобы установить картинку на веб-страницу, следует добавить параметр background к селектору BODY, как показано в примере 1.
Пример 1. Фоновый рисунок
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Фоновое изображение</title>
<style type="text/css">
BODY {
background:
url("pic.gif") /* Путь к графическому файлу */
no-repeat /* Отменяем повторение рисунка */
30px /* Смещаем рисунок вправо */
20px; /* Сдвигаем рисунок вниз */
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>
В данном примере графический рисунок pic.gif определяется как фон веб-страницы без повторения изображения. Чтобы картинка не прилегала плотно к краям браузера, она смещается на 30 пикселов вправо и на 20 пикселов вниз от своего исходного положения.
Повторение рисунка
Благодаря тому, что можно задавать повторение фонового рисунка по горизонтали или вертикали, доступно несколько вариантов оформления веб-страниц. Например, для создания вертикальной полосы по левому краю (рис. 2) понадобится изображение, показанное на рис. 3.
Рис. 2. Повторение рисунка по вертикали
Рис. 3. Картинка для создания фона
Рисунок должен быть таким, чтобы по вертикали он состыковывался между собой без заметных швов, а также составлял единое целое с заданным цветом фона веб-страницы. В примере 2 приводится создание такого фонового рисунка, опять же с помощью параметра background и его аргумента repeat-y.
Пример 2. Повторение фона по вертикали
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Фоновое изображение</title>
<style type="text/css">
BODY {
background:
#fc0 /* Цвет фона веб-страницы */
url("pic.gif") /* Путь к графическому файлу */
repeat-y; /* Повторение по вертикали */
}
</style>
</head>
<body>
<p>...</p>
</body>
</html>
Аналогично можно делать повторение фона по горизонтали, например, создав градиент и установив его в качестве фоновой картинки (рис. 4).
Рис. 4. Использование градиента в качестве фона
Чтобы получить веб-страницу, приведенную на рис. 4, потребуется вначале сделать картинку с градиентным переходом. Ширину достаточно указать 20-40 пикселов, а высота рисунка зависит от цели документа и предполагаемой высоты содержимого веб-страницы. Не стоит также забывать, что рисунок большого размера приведет к увеличению объема графического файла. А это отрицательно скажется на скорости его загрузки и, в конечном итоге, приведет к замедлению отображения фона. Для данного случая вполне подошла картинка размером 30х200 пикселов (рис. 5).
Рис. 5. Градиентное изображение для создания фона
В примере 3 показан код HTML для создания градиентного фона.
Пример 3. Повторение фона по горизонтали
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Фоновое изображение</title>
<style type="text/css">
BODY {
background:
url("pic.gif") /* Путь к графическому файлу */
repeat-x; /* Повторяем фон по горизонтали */
text-align: center; /* Выравнивание блока по центру */
}
DIV {
margin: auto; /* Отступы вокруг блока */
width: 75%; /* Ширина блока */
height: 90%; /* Высота блока */
text-align: left; /* Выравнивание текста по левому краю */
padding: 10px; /* Поля вокруг текста */
background: white; /* Цвет фона */
}
</style>
</head>
<body>
<div>
Lorem ipsum...
</div>
</body>
</html>
Градиентный рисунок хорошо сочетается с одноцветным блоком, поэтому в данном примере добавляется слой, в котором и отображается содержимое веб-страницы.
Добавление рисунка к тексту
С помощью фонового изображения можно автоматизировать процесс добавления рисунков к определенному тексту, например, к заголовкам. Для этого используется универсальный параметр background, который применяется к нужному селектору. В качестве значения указывают путь к рисунку и, чтобы он не повторялся, аргумент no-repeat (пример 4).
Пример 4. Добавление рисунка
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Фоновое изображение</title>
<style type="text/css">
H2 {
background:
url('sample.gif') /* Путь к изображению */
no-repeat /* Не устанавливать повторение фона */
1px /* Смещаем рисунок вправо */
2px; /* Смещаем рисунок вниз */
padding-left: 20px; /* Отступ слева от текста */
}
</style>
</head>
<body>
<h2>Заголовок</h2>
<p>Основной текст</p>
</body>
</html>
Как показано в данном примере, рисунок можно сдвигать по горизонтали и вертикали относительно своего исходного положения, по умолчанию это левый верхний угол блочного элемента. Это позволяет установить изображение по отношению к тексту желаемым образом. Чтобы текст не накладывался на рисунок, обязательно следует добавить параметр padding-left, за счет него текст смещается вправо на указанное расстояние. Оно в каждом случае индивидуально и обычно равно ширине рисунка и желаемому отступу между изображением и текстом.
При добавлении картинки указанным способом следует учитывать, что размер текста в браузере может меняться, а, следовательно, изменится и положение рисунка относительно текста. Кроме того, высота изображения ограничена высотой текста, поэтому рисунок при изменении размера текста будет отображаться иначе. На рис. 6 показан вид и положение картинки и текста при его разной величине.
Рис. 6. Отображение картинки при изменении размеров текста
Видно, что при увеличении размера заголовка, изображение книжки и текст меняют свое исходное положение. Такой разброс можно снизить, если в качестве единицы измерения применять em, поскольку эта единица привязана к высоте текста.
Если добавляется высокая картинка, то при уменьшении текста она «обрезается» снизу, а затем, при увеличении размера, рисунок отображается полностью.
| Статья опубликована: 22.11.2005 | Последнее обновление: 29.04.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
egor
19.05.2006
cypr@ya.ru
Игорь
20.03.2007
Влад Мержевич
21.03.2007
Антон
30.03.2007
Дано: ячейка таблицы размером AxB пикселей и рисунок размером CxD пикселей (С<A, D<B). Требуется: сделать рисунок фоновым для ячейки, при этом растянув его до размеров AxB. Как этого добиться?
Поясняю: поверх этого рисунка мне нужно еще написать некий текст. Иными словами, нужен "<img width=A height=B>", поверх которого написан текст.
Влад Мержевич
02.04.2007
Оксана
15.04.2007
Не могу разобраться с проблемой:
мне необходимо сделать повторение рисунка, который являеться частью фона, по вертикале (y)
Прописываю
<style type="text/css">
body {
background:
url("poloski.gif")
repeat-y
}
</style>
</head>
Но картинка упорно не хочет повторяться, при том что по оси оx все прекрасно повторяеться. Могут ли быть какие-либо нюансы которые надо учитывать в этом задаче?
Влад Мержевич
16.04.2007
ира
26.04.2007
Дядя Саша
29.04.2007
И мне понравилось, кстати ждем новых статей посвещенных web 2.0 интерфейсам smile
гы)
Оксана
01.05.2007
Ирина спасибо за совет, но Вы я вижу не совсем внимательно читали статью.
Евгений
29.05.2007
Максим
30.05.2007
Максим
30.05.2007
Влад Мержевич
30.05.2007
Надо внутрь ячейки поместить тег DIV и для него установить фоновый рисунок. Для самой ячейки тоже добавляется фон через стили.
Влад Мержевич
30.05.2007
Есть стилевые параметры background-image, background-repeat, используй их.
Тимур
08.06.2007
Влад Мержевич
09.06.2007
Дмитрий
24.06.2007
подскажите,пожалуйста,как добавить рисунок,но в конце текста?
предполагается какой то текст,а в конце,вместо имени должен распологаться маленький рисунок?
Влад Мержевич
25.06.2007
Дмитрий
26.06.2007
пробовал разместить фоновый рисунок,как показано здесь http://htmlbook.ru/faq/?a=36.работает в IE,а в "Opera" висит в правом верхнем,опускается только тогда,когда добавляешь текст.подскажите,как добиться желаемого результата?
Дмитрий
26.06.2007
Идея такая,чтобы при переходе между страницами сайта,рисунок оставался везде одинаково,как и логотип.и можно ли сделать так,что бы при клике на рисунке,открывался почтовый клиент?
Влад Мержевич
27.06.2007
Про ссылки почитайте здесь
http://htmlbook.ru/content/?id=25
Дмитрий
27.06.2007
я наверное не правильно выразился.я имел ввиду,что если задать этот рисунок фоном,можно ли потом сделать его ссылкой ?хочу прописать его в стилях потому,что он будет на всех страницах,одновременно являясь ссылкой.
Влад Мержевич
27.06.2007
Виталий
18.07.2007
Спасибо большое заранее
Виталий
Piligrim
27.07.2007
30.03.2007
Подскажите, как решить такую задачу.
Дано: ячейка таблицы размером AxB пикселей и рисунок размером CxD пикселей (С<A, D<B). Требуется: сделать рисунок фоновым для ячейки, при этом растянув его до размеров AxB. Как этого добиться?
Поясняю: поверх этого рисунка мне нужно еще написать некий текст. Иными словами, нужен "<img width=A height=B>", поверх которого написан текст.
2Антон
Попробуйте width="100%" height="100%"
2Виталий
В стилях это делается так - position:к примеру absolute;
left:Значение в нужных вам еденицах(px,em...);для Right,Top,Bottom тоже самое.
Изображение-ссылка - <img src="путь"><a href="путь"></a></img>
Алексей
01.08.2007
По-моему,проще воспользоваться стилями.
помогите, пожалуйста
05.08.2007
По-моему, ед. способ - это расширить картинку в фотошопе до размеров ячейки
и использовать ее как фон
А у меня такой вопрос. Есть код:
<img src="*.jpg" width="600" height="xxx">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr >
<td >
</td>
</tr>
</table>
если умерьшить размеры окна до размера меньше размера картинки, то таблица не растягивается на все 100. почему это так??????
Появляется какая-то область правее таблици
Как от этого избавиться???????????????????????????????????????
Влад Мержевич
07.08.2007
Azazello
09.08.2007
поскажите, как задавать направление движения background?
background:
url('sample.gif') /* Путь к изображению */
no-repeat /* Не устанавливать повторение фона */
1px /* Смещаем рисунок вправо */
2px; /* Смещаем рисунок вниз */ - я имею ввиду, почему именно вправо и почему именно вниз. Как быть с "влево" и "вверх"? Спасибо.
Влад Мержевич
10.08.2007
Kos
21.08.2007
Саша
22.08.2007
<div id="rightFrameTopDIV"> <!---->
<div id="rightFrameTopTOP">
<div id="rightFrameTop1"></div>
<div id="rightFrameTop2"></div>
<div id="rightFrameTop3"></div>
</div>
<div id="rightFrameTopBODY">
<div id="rightFrameTop4"></div>
<div id="rightFrameTop5">
<div id="gisdiv"><img src='http://informer.gismeteo.ua/34300-13.GIF' border=0></div >
</div>
<div id="rightFrameTop6"></div>
</div>
<div id="rightFrameTopBOTTOM">
<div id="rightFrameTop7"></div>
<div id="rightFrameTop8"></div>
<div id="rightFrameTop9"></div>
</div>
</div>
Если просто не использовать высоту, использовать float:left, то ячейки 4 и 6 пропадают. Нид Хэлп
Влад Мержевич
23.08.2007
Почитайте про уголки здесь:
http://htmlbook.ru/content/?id=106
Анна
30.09.2007
Давид
04.10.2007
BODY {
margin: 0px;
padding: 0px;
font-family: Veranda, Arial, sant-serif; /* Рубленый шрифт на странице */
background:
#54756b /* Цвет фона */
url("Орн.jpg") /* Путь к графическому файлу */
no-repeat
40px
67px
}
Давид
04.10.2007
Василий
19.01.2008
Dim@
20.01.2008
scroll - фон перемещается вместе с содержимым страницы;
fixed - фоновая графика статична.
garri kaspar
24.01.2008
garri kaspar
24.01.2008
Влад Мержевич
19.02.2008
Криведко
29.02.2008
Руслан
24.03.2008
Юрий
21.04.2008
Лиля
15.05.2008
Дмитрий
30.07.2008