Разработка сайта для Вашего бизнеса. Веб дизайн. Дизайн логотипа, фирменного стиля, рекламная фотография . Комплексный рекламный креатив.

Ralex. We do the work.
На рынке с 1999го года. Средняя ценовая категория. Ориентация на эффективность решений.
Ознакомтесь с нашим портфолио
Узнайте больше о услугах
Свяжитесь с нами:
E-mail: [email protected]
Tel: (044) 587 - 84 - 78
Custom web design & дизайн и разработка сайта "под ключ"
Креативный, эффективный дизайн. Система управления сайтом (СУС).
Custom flexible разработка систем электронной коммерции
Система e-commerce разрабатывается под индивидуальные потребности. Гибкая функциональность.
Search Engine Optimzation & оптимизация под поисковые системы (SEO)
Постоянная оптимизация и мониторинг сайта в поисковых системах. Достигаем результата быстро и эффективно
Custom logo design & дизайн логотипа и фирменного стиля
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.
профессиональная рекламная фотография
креативно, смело, качественно
Custom logo design & рекламный креатив. дизайн рекламы
Многолетний опыт. Огромное портфолио. Уникальное предложение и цена.

Розтягнути background на весь екран за допомогою css, jquery, php

  1. CSS3 метод
  2. Розтягнути background на чистому CSS
  3. 1 - Метод
  4. 2 - Метод
  5. Розтягнути background за допомогою jQuery
  6. Розтягуємо background за допомогою PHP
  7. Насолоджуйтесь!

Наша взаимовыгодная связь https://banwar.org/

Нашою метою буде реалізувати фон (background) сайту, який буде покривати весь робочий простір вікна браузера. Ми будемо робити це за допомогою різних технік використовуючи CSS3, чистий CSS, jQuery, PHP.

Ми будемо робити це за допомогою різних технік використовуючи 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?
Категории
  • Биология
  • Математика
  • Краеведению
  • Лечебная
  • Наука
  • Физике
  • Природоведение
  • Информатика
  • Новости

  • Новости
    https://banwar.org/
    Наша взаимовыгодная связь https://banwar.org/. Запустив новый сайт, "Пари Матч" обещает своим клиентам незабываемый опыт и возможность выиграть крупные суммы.


    Наши клиенты
    Клиенты

    Быстрая связь

    Тел.: (044) 587-84-78
    E-mail: [email protected]

    Имя:
    E-mail:
    Телефон:
    Вопрос\Комментарий: