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

Решение
Данное правило стиля задает фоновое изображение для блока со списком закачек, как видно на рис. 3.9.

#smallbox {
background-image: url(boxbg.gif);
background-repeat: repeat-x;
float: left;
margin-right: 20px;
width: 220px;
border:1px solid #D2D7E4;
}

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

Рис. 3.9. Использование фонового изображения для отображения градиентного перехода в блоке со списком ингредиентов

Обсуждение
Фоновые изображения можно использовать и для других элементов страницы, в том числе и для заголовков, как показано на рис. 3.10. Как видите, отображаемая под заголовком прерывистая линия создана путем повторения одного и того же изображения. Оно изначально расположено в левом нижнем углу заголовка, а чтобы слегка отделить его от текста заголовка, я задала для последнего внутренний отступ снизу в шесть пикселов.

<h1>Что такое XOOPS?</h1>

h1 {
background-image: url(dotty.gif);
background-repeat: repeat-x;
background-position: bottom left;
padding: 0 0 6px 0;
color: #41667F;
font-size: 160%;
font-weight: normal;
background-color: transparent;
}

Рис. 3.10. Использование фонового изображения для отображения линии под заголовком

Даже ссылкам можно задавать фон, что порой может привести к весьма интересным эффектам, как на рис. 3.11.

a:link, a:visited {
color: #41667F;
background-color: transparent;
padding-right: 10px;
}
a:hover {
background-image: url(arrow.gif);
text-decoration: none;
background-position: center right;
background-repeat: no-repeat;
}

Рис. 3.11. Применение фонового изображения к ссылке при наведении на нее указателя мыши

DEMO