Фоновый рисунок
Раньше, когда нужен был фон для сайта, заморачиваться особо не приходилось - прописал в body путь к рисунку, выставил позицию и сидишь, любуешься результатом. И этот метод отлично работал до тех пор, пока мне не вздумалось создать сайт на юкозе. Сразу после переноса верстки возник недоуменный вопрос: почему фон для боди сместился на пять пикселей вниз??? В исходниках все в порядке, на локал-хосте во всех браузерах отображается отлично. Так в чем же дело?
Ответ пришел внезапно - только стоило закрыть верхний банер. И фоновая картинка сразу становилась на свое положенное место. Сразу возникла идейка фон на 5px опустить вниз. Но, опять же - с банером выглядело отлично, но если убрать банер?
Как вариант - поместить все в один блок и прописать фон для этого div'a:
.bgsite{
background: url(../images/bg.gif) repeat-x top #b4d5f3;
width: 100%; height: 355px;
}
Высота - обязательное условие для этого примера.
Но бывают дизайны, в которых фоновая картинка, или градиент, идет по низу страницы. Body снова подводит - фоновый рисунок за пределы видимости не опускает. Только в пределах видимости страницы и точка. Как быть?
Фон внизу страницы с учетом большого текста
То футер всегда внизу страницы, и чтобы с учетом вертикального скроллинга, то градиентный фон нужно поместить в самый низ страницы, да еще чтобы учитывалось увеличение текста на странице до появления полосы прокрутки... С первым более-менее разобрались, а со вторым...
Рассмотрим два варианта
Первый - запихнуть всё в один div, и в стилях прописать overflow: hidden для этого блока:
.bgsite{
background: url(../images/bg.gif) repeat-x bottom #b4d5f3;
width: 100%;
overflow: hidden;
}
............
Слева одно, справа - другое...
А бывает и такое, что для левой стороны страницы нужен один фон, а для правого - чуть темнее. Всегда выручал такой трюк:/* написать про два абсолютных дива, ширина - 45% */
