Фон для сайту з картинкою на весь екран (background-size)

1. Чудове, просте і прогресивне рішення за допомогою CSS3
2. CSS -хак номер 1
3. CSS -хак варіант 2
4. Метод з jQuery

Веб технології, як і різного роду тенденції в дизайні, не стоять на місці, тому кожен раз з'являються якісь оригінальні фішки і нюанси для сайтів. Одним з подібних «напрямків» є використання фону (backgorund), який розтягується на весь екран по ширині і висоті. Щось на зразок близько року тому або більше я розповідав як зробити великий фон для сайту - зображення містилося в шапку блога і плавно «переходило» в основний фоновий колір веб-сторінки. При бажанні можна навіть додати посилання на фон підкладки .

Мета даного уроку розмістити на сайті фонову картинку, яка б постійно закривала весь фон вікна браузера. Що ж конкретно потрібно зробити:

• заповнити всю сторінку одним зображенням без пробілів;
• зміна розмірів картинки при необхідності (зменшенні вікна браузера);
• збереження пропорцій зображення;
• розташування зображення в центрі сторінки;
• відсутність смуг прокрутки на сторінці;
• крос-браузерні рішення, що підходить для різних браузерів;
• реалізація без всяких сторонніх технологій типу flash.

Отже, є відразу декілька відповідних рішень для фону сайту на весь екран.

Чудове, просте і прогресивне рішення за допомогою CSS3

Для реалізації завдання ми можемо використовувати властивість background-size в CSS3. Будемо використовувати елемент html який краще body. Встановимо фіксований і центрований бекграунд, після чого будемо використовувати в 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; }

Рішення підтримують майже всі браузери популярні в мережі:

• Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
• Opera 10+ (Opera 9.5 підтримує background-size але без значення cover)
• Chrome Whatever +
• IE 9 +
• Safari 3+

Якийсь Goltzman знайшов рішення, яке дозволяє працювати хаку в IE

filter: progid: DXImageTransform.Microsoft.AlphaImageLoader (src = '. myBackground.jpg', sizingMethod = 'scale'); -ms-filter: "progid: DXImageTransform.Microsoft.AlphaImageLoader (src = 'myBackground.jpg', sizingMethod = 'scale')";

Але увагу !!! при цьому можуть виникнути деякі проблеми з роботою посилань на сторінці. До речі, трохи пізніше Matt Litherland додав що код, в принципі, можна використовувати але для цього не можна застосовувати елементи html або body а потрібно реалізувати всі через div з 100% заввишки і шириною.

CSS -хак номер 1

Альтернативну версію представляє Doug Neiner. У цьому випадку використовується вбудований в сторінку елемент <img>, який може змінювати розмір в будь-якому браузері. Встановлюємо значення min-height, яке сприяє заповненню вікна браузера вертикально і ставимо 100% для width, що заповнює сторінку горизонтально. Також ставимо min-width щоб зображення ніколи не було меншим, ніж воно є насправді.

Далі в хаке використовується опція @media для перевірки чи є вікно браузера меншим ніж зображення і за допомогою процентного значення left і властивості margin-left вирівнюємо картинку по центру.

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; } @Media screen and (max-width: 1024px) {/ * Specific to this particular image * / img.bg {left: 50%; margin-left: -512px; / * 50% * /}}

Працює в будь-яких версіях якісних браузерів - Safari / Opera / Firefox і Chrome. Для IE як завжди є свої нюанси:

• IE 9 - працює;
• IE 7/8 - найчастіше функціонує правильно, але не центрує зображення менше вікна браузера;
• IE 6 - можна налаштувати, але кому взагалі потрібен цей браузер.

CSS -хак варіант 2

Ще один варіант вирішення завдання за допомогою CSS стилів це розмістити вбудоване зображення на сторінці з фіксованою позицією в лівому верхньому кутку, після чого задати для min-width і min-height значення 100% зберігаючи пропорції.

<Img src = "images / bg.jpg" id = "bg" alt = "">

#bg {position: fixed; top: 0; left: 0; / * Preserve aspet ratio * / min-width: 100%; min-height: 100%; }

Однак це не дозволяє центрувати картинку, що, в принципі, хотілося б зробити. Тому додаємо зовнішній для зображення DIV. Він робиться в два рази більшим, ніж розмір вікна браузера, після чого картинка буде зберігати співвідношення сторін, закривати все вікно браузера і при цьому бути в його центрі.

<Div id = "bg"> <img src = "images / bg.jpg" alt = ""> </ div>

#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 both обидва глючат однаково з помилкою позиціонування.

Метод з jQuery

Даний варіант набагато легше (з точки зору CSS) якщо ми знаємо що співвідношення сторін картинки (img використовується в якості фону) більше або менше поточного співвідношення вікна браузера. Якщо менше, то ми можемо використовувати тільки width = 100% і при цьому по ширині і висоті вікно буде однаково заповнене. Якщо більше - можна вказати тільки height = 100% для заповнення всього вікна.

Доступ до всіх даних йде через JavaScript, коди використовуються наступні:

<Img src = "images / bg.jpg" id = "bg" alt = "">

#bg {position: fixed; top: 0; left: 0; } .Bgwidth {width: 100%; } .Bgheight {height: 100%; }

$ (Window) .load (function () {var theWindow = $ (window), $ bg = $ ( "# bg"), aspectRatio = $ bg.width () / $ bg.height (); function resizeBg () {if ((theWindow.width () / theWindow.height ()) <aspectRatio) {$ bg .removeClass () .addClass ( 'bgheight');} else {$ bg .removeClass () .addClass ( 'bgwidth') ;}} theWindow.resize (function () {resizeBg ();}). trigger ( "resize");});

На мою думку, центрування в цьому випадку не проводиться (наскільки я зрозумів), але його можна зробити. Підтримується більшість десктопних браузерів, в тому числі IE7 +. Наостанок автор статті про хакі підготував набір файлів прикладів, в яких це все реалізована - скачати можна тут . У коментарях до статті-оригіналу також міститься деяка інформація і обговорення, хоча більшість важливих деталей автор додавав у вигляді апрейтов до посту і у мене він також переведені і вказані. Звичайно, розібратися у всьому цьому допоможуть і приклади. В цілому, якби не постійні «приколи» від IE7 все згадані хакі були б ідеальними.

PS Хочете купити книгу? - не обов'язково ходити в магазині адже зараз онлайн книжковий інтернет магазин дозволяє зробити все через мережу - вибрати, оплатити і оформити доставку на будинок.