Фон на всю сторінку за допомогою CSS
У сьогоднішньому уроці Ви дізнаєтесь дві техніки зі створення фону на всю сторінку.
Наше тло буде: - заповнювати повністю сторінку (без білих смуг) - правильно масштабуватися - дотримуватися пропорцій зображення - центрований на сторінці - не містити скролів - кросбраузерним
Техніка №1 + усі файли
Цього всього досягти дуже важко, тому нам доведеться трохи попотіти та використовувати безліч різних технік для цього. Перш за все, нам потрібне правильне масштабування зображення. Традиційне background-image нам тут не допоможе, тому ми будемо використовувати інлайнове зображення.
Техніка №1
Це зображення буде поміщене на сторінку в різні шари. Кожен шар (блок) виконуватиме свою роль.
Вийшло досить багато коду, але наприкінці ми отримали добрий результат. Після цього у нас буде ідеальне тло, але нам ще необхідно розміщувати контент на сторінці. Для цього нам знадобиться ще один контейнер. Він перебуватиме над фоном, матиме ширину і висоту на весь екран, і overflow auto (скроли можуть з'явитися). Всередині цього контейнера ми можемо розміщувати вміст.
У Файрфоксі "фокус" за замовчуванням спрямований на елемент body при завантаженні сторінки. Це означає, що при натисканні на пропуск сторінка опуститься до body, і у нас з'являться білі смуги. Щоб виправити це, нам знадобиться невеликий jQuery фікс. Він прибере "фокус" з елемента body та направить його на інший захований елемент.
Техніка №2
У цьому прикладі ми будемо використовувати CSS без фіксації. Нам знадобиться лише інлайнове зображення із класом “bg”. Більше ніякої іншої розмітки. Це великий плюс, порівняно з першою технікою.
Однак,Ця техніка не виконує всіх вимог, які ми прописали на самому початку. Цей фон не буде центрований в IE 7, взагалі не працюватиме в IE 6, і може іноді неправильно масштабуватися. Але все ж таки це непоганий варіант.