Мета у нас така, що фоновий малюнок на сайті повинен закривати все видиме вікно браузера в будь-який час. Ось деякі конкретні вимоги:
* Зображення заповнює всю сторінку, без пробілів
Малюнок масштабується якщо потрібно
* Зберігаються пропорції зображення (співвідношення сторін)
* Зображення центрируется в центрі сторінки
* Не з'являються смуги прокрутки
* По-можливості максимально кросбраузерності рішення
* Без різних махінацій з флешем
Відмінний, простий і прогресивний метод з використанням CSS
Ми можемо вирішити нашу задачу за допомогою чистого CSS, за що спасибі властивості background-size, яке з'явилося в CSS3. Нам знадобитися елемент html (краще, ніж використовувати body, тому що це не завжди повна висота вікна браузера). Ми поставимо фоновий малюнок елементу html, центруємо його, позицію виберемо фіксовану (fixed) і скорегуємо розмір зображення за допомогою властивості background-size, яке встановимо в значення cover:
html <
background: url (images / bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
>
Працювати такий варіант буде в:
* Safari 3+
* Chrome будь-якої версії
* IE 9 +
* Opera 10+ (Opera 9.5 підтримує background-size, але не підтримує cover)
* Firefox 3.6+ (Firefox 4 підтримує властивість background-size без приставки -moz)
Є так само рішення для IE, але будьте обережно - є думка, що після його застосування деякі посилання на сторінці не працюють. Якщо таке трапляється - спробуйте застосувати цей код не до блокам html або body, а до блоку div, але з шириною і висотою 100%. Ось код:
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader (src = '. myBackground.jpg', sizingMethod = 'scale');
-ms-filter: "progid: DXImageTransform.Microsoft.AlphaImageLoader (src = 'myBackground.jpg', sizingMethod = 'scale')";
Тільки CSS. варіант №1
У цьому прикладі ми будемо використовувати елемент img, який легко змінює розмір в будь-якому браузері. Ми скористаємося властивістю min-height щоб заповнити вікно браузера вертикально і задамо ширину в 100% щоб зробити те ж саме по горизонталі. Ми так само поставимо min-width для того, щоб зображення не ставало менше ніж воно є насправді.
img.bg <
/ * Set rules to fill background * /
min-height: 100%;
min-width: 1024px;
/ * Set up proportionate scaling * /
width: 100%;
height: auto;
/ * Set up positioning * /
position: fixed;
top: 0;
left: 0;
>
Працює в наступних браузерах:
* У будь-якої версії нормальних браузерів: Safari / Chrome / Opera / Firefox
* IE 6: Працює - але є проблеми з фіксуванням зображення
* IE 7/8: Здебільшого працює, але не центрує на маленьких дозволах, при цьому заповнює екран повністю
* IE 9: Працює
Тільки CSS. варіант №2
Є ще один досить простий спосіб вирішити нашу задачу: використовувати зображення на нашій сторінку, задати йому фіксовану позицію в верхній лівий кут і поставимо min-height і min-width 100%, зберігаючи співвідношення сторін.
#bg <
position: fixed;
top: 0;
left: 0;
/ * Preserve aspet ratio * /
min-width: 100%;
min-height: 100%;
>
Тим не менш, це не центрує зображення, що важливо для нас. Ми можемо вирішити цю проблему уклавши зображення в блок div. Цей блок буде за розмірами в 2 рази більше ніж екран браузера. Коли ж ми вставимо зображення в цей блок, то воно буде знаходитися строго по центру вікна браузера, зберігши при цьому співвідношення сторін.
#bg <
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
>
#bg img <
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
>
Працює цей варіант в:
* Safari / Chrome / Firefox (імовірно не всі старі версії)
* IE 8+
* Opera (всі версії) і IE обидва неправильно розуміють цей код (неправильне позиціонування, з якогось дива)
Варіант з ипользованием jQuery