Если вы когда-нибудь пробовали задать фон для боковой колонки, подобной той, что мы создали в разделе «Создание макета фиксированной ширины с двумя колонками, расположенного по центру страницы», то наверняка убедились в невозможности задания для нее той же высоты, что и у расположенной рядом более длинной колонки, из-за чего добавленный фон выглядит немного странно. К примеру, при задании фонового цвета для блока с панелью навигации он займет по высоте только область, в которой расположены ссылки, а не всю область с контентом, как показано на рис. 9.39.

Решение
Для решения этой проблемы можно добавить фоновое изображение к элементу страницы, длина которого совпадает с длиной второй колонки, а ширина соответствует ширине панели навигации. При этом создастся впечатление, будто фон принадлежит самой панели навигации.
В нашем случае можно добавить фоновое изображение для элемента wrapper, как показано на рис. 9.40:

Рис. 9.39. Серый фоновый цвет окрашивает только область со ссылками

Рис. 9.40. Фон как бы привязан к панели навигации

#wrapper {
position: relative;
text-align: left;
width: 760px;
margin-right: auto;
margin-left: auto;
margin-bottom: 1em;
background-image: url(sidebar.gif);
background-repeat: repeat-y;
border-right: 1px solid #888888;
border-bottom: 1px solid #888888;
}

 Обсуждение
Этот несложный прием можно с успехом применять при создании различных макетов страниц. В данном примере фоновый цвет был задан для блока wrapper, поскольку фон должен простираться вниз до конца области с контентом; изображение «шапки» закрывает фоновое изображение панели навигации в верхней части страницы. Аналогичным об- разом можно сделать так, чтобы фоновое изображение распространялось до нижнего блока или после определенной области контента: для этого достаточно задать фоновое изображение для элемента, содержащего необходимую область.