Инструкция
1
Если вы хотите, чтобы сайт обладал статичными неизменными размерами, вам потребуется создать статичную шапку, которая не изменяется в зависимости от изменения ширины экрана. Определите ширину и высоту шапки (например, 996х230) и вставьте в верхний блок фоновую картинку, используя следующий CSS-код, где header-1.jpg – это фоновое изображение:#header {
background: #a6b7d3 url(img/header-1.jpg) no-repeat;
width: 996px;
height: 230px;
}HTML-код шапки этого типа будет выглядеть так:<div></div><!-- Блок шапки -->
2
Если же сайт построен так, что его размеры подстраиваются под ширину экрана, шапка должна быть сверстана с учетом всех основных разрешений мониторов. Максимальная ширина такой шапки должна составлять 1920 пикселей. Для вставки такой шапки используйте CSS-код:#header { background: #a6b7d3 url(img/header-2.jpg) no-repeat center; height: 250px;}HTML-код является в данном случае аналогичным предыдущему. CSS-код изменен в некоторых параметрах – теперь в нем появился атрибут центровки изображения шапки, позволяющей подогнать фон под любую ширину экрана.
3
Также вы можете сверстать более сложный вариант шапки, нарезанный на несколько фоновых блоков, которые будут менять свое положение в зависимости от размера окна просмотра. CSS-код такой шапки более сложен и обширен, и подразумевает повторения нескольких элементов фона в соответствии с плавающими размерами окна браузера, в котором могут просматривать ваш сайт.