- CSS3 метод
- Розтягнути background на чистому CSS
- 1 - Метод
- 2 - Метод
- Розтягнути background за допомогою jQuery
- Розтягуємо background за допомогою PHP
- Насолоджуйтесь!
Наша взаимовыгодная связь https://banwar.org/
Нашою метою буде реалізувати фон (background) сайту, який буде покривати весь робочий простір вікна браузера. Ми будемо робити це за допомогою різних технік використовуючи CSS3, чистий CSS, jQuery, PHP.
Давайте визначимо, що саме ми хочемо отримати:
Повна заливка вікна картинкою, без пробілів.
Розтягування фонової картинки, наскільки це потрібно.
Відповідність пропорцій картинки.
Картинка повинна знаходитися в центрі.
Це повинно бути максимально кросбраузерності .
І без всяких махінацій з flash.
CSS3 метод
Ми можемо розтягнути background на чистому css, завдяки властивості background- size яке присутнє в CSS3. Ми будемо використовувати html елемент, це краще ніж body, так як він завжди буде дорівнює висоті вікна браузера. Ми зробимо background фіксованим і поставимо його в центрі вікна, після цього ми його растянем на весь екран за допомогою властивості background- size.
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 Whatever +
IE 9 +
Opera 10+ (Opera 9.5 підтримує background-size але не підтримує ключових слів)
Firefox 3.6+
Також є варіант вирішення для IE, тільки необхідно тестувати. Деякі веб-майстри кажуть, що можуть виникнути проблеми з посиланнями і скроллингом.
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader (src = '. myBackground.jpg', sizingMethod = 'scale'); -ms-filter: "progid: DXImageTransform.Microsoft.AlphaImageLoader (src = 'myBackground.jpg', sizingMethod = 'scale')";
Розтягнути background на чистому CSS
Зробити background на весь екран за допомогою чистого CSS коду, можна двома методами. Не виняток що існують і інші.
1 - Метод
Тут ми будемо використовувати елемент img, який буде розтягнутий на все вікно, і буде виглядати однаково в усіх браузерах. Ми встановимо min- height, який буде заповнювати вікно браузера по вертикалі. Також встановимо width на 100%, який буде заповнювати вікно по горизонталі. Ми також встановимо min- width картинки, таким чином, фон становить не менше, ніж ми встановимо.
Особливо хитра частина коду, це використання медіа запиту, для запобігання бага, коли вікно браузера буде менше, ніж картинка фону. А також, комбіноване використання відступу з процентним left. Це дозволяє тримати background в центрі, незважаючи ні на що.
Ось CSS код:
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 / Chrome / Opera / Firefox
IE 6: Принаймні background залишається фіксованим
IE 7/8: Безліч робіт не центруються на малих розмірах, але заповнює екран кращим чином
IE 9: Працює
2 - Метод
Ще один простий спосіб реалізувати це, вставити картинку на сторінку. Вона буде мати фіксовану позицію і буде розміщена в верхньому лівому кутку. Ми дамо їй 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%; }
Хоча, цей код не центрує background image. Тому, зараз ми це виправимо ... Ми можемо фіксувати картинку за допомогою взяття її в 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 відображають однаково (погано позиціонують, не зрозумію чому)
Розтягнути background за допомогою jQuery
Ця ідея з'явилася трохи раніше (як альтернатива CSS методу). Якщо ми будемо знати пропорції і розмір картинки, ми зможемо розтягнути background на CSS. Якщо картинка менше вікна браузера, ми змінимо width на 100% для картинки. Якщо більше, ми можемо встановити тільки height 100% і знати, що картинка заповнить все як по ширині, так і по висоті.
Ми можемо отримати доступ до потрібних даних за допомогою JavaScript. Як і всі, я використовую фреймверк jQuery.
<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 +
І всі інші популярні браузери
Розтягуємо background за допомогою PHP
Власне, PHP ми можемо використовувати для однієї мети: обробки зображення за допомогою GD бібліотеки. Раніше я розповідав про те, як зробити скрипт превью картинок . В цьому випадку його можна використовувати для зміни розміру зображення на льоту. Але виникає проблема, зображення буде генеруватися при кожному зверненні до сайту. Для великого проекту це занадто ресурсномістких. Краще буде зробити готові заготовки зображень, відповідно найпопулярнішим дозволами екранів (1024 x 1280, 1280 x 800 ...), використовуючи фотошоп це не складно. У разі, якщо дозвіл екрана інший, це поодинокі випадки, ми підключимо скрипт автоматичної зміни розміру. Він підключається наступним чином:
$ (Function () {h = $ (window) .height (); w = $ (window) .width (); $ (body) .style ( 'background', 'url (phpthumb.php? Src = bg. jpg & w = '+ w +' & h = '+ h);});
Насолоджуйтесь!
Це все відомі мені способи, як розтягнути background на весь екран. Якщо ви робите це інакше, будьте ласкаві опишіть це в коментарях. Буду радий дізнатися про нові варіанти розтягування background за допомогою css та інших технік. Творчих вам успіхів!
далі: Лічильник завантажень файлу на PHP & MySQL
Php?