Як вставити свою шапку на сайт

Якщо ви хочете, щоб сайт володів статичними незмінними розмірами, вам буде потрібно створити статичну шапку, яка не змінюється в залежності від зміни ширини екрану. Визначте ширину і висоту шапки (наприклад, 996х230) і вставте в верхній блок фонову картинку, використовуючи наступний CSS-код, де header-1.jpg - це фонове зображення: #header {
background: # a6b7d3 url (img / header-1.jpg) no-repeat-
width: 996px;
height: 230px;
} HTML-код шапки цього типу буде виглядати так:

Якщо ж сайт побудований так, що його розміри підлаштовуються під ширину екрану, шапка повинна бути зверстана з урахуванням всіх основних дозволів моніторів. Максимальна ширина такої шапки повинна становить 1920 пікселів. Для вставки такої шапки використовуйте CSS-код: #header {background: # a6b7d3 url (img / header-2.jpg) no-repeat center- height: 250px;} HTML-код є в даному випадку аналогічних попередньому. CSS-код змінено в деяких параметрах - тепер в ньому з`явився атрибут центрування зображення шапки, що дозволяє підігнати фон під будь-яку ширину екрану.

Також ви можете зверстати більш складний варіант шапки, нарізаний на кілька фонових блоків, які будуть змінювати своє положення в залежності від розміру вікна перегляду. CSS-код такий шапки складніший і великий, і має на увазі повторення кількох елементів фону відповідно до плаваючими розмірами вікна браузера, в якому можуть переглядати ваш сайт.