Целта имаме е, че фоновото изображение на сайта трябва да обхваща всички видими прозореца на браузъра, по всяко време. Ето и някои специфични изисквания:

* Изображението изпълва цялата страница, без пропуски
Фигура намалена, ако е необходимо
* Съотношение запаметеното изображение аспект (съотношение)
* Изображението е центрирана в средата на страницата
* Не се появява за превъртане
* Ако е възможно, решението най-различни браузъри
* Не е незначителен с различни fleshem

Отлична, прост и прогресивен метод за използване на CSS

Ние можем да решим проблема, като се използва чист CSS, за които благодарение на имот фон-размер, който се появява в CSS3. Ние се нуждаем от HTML елемент (по-добре, отколкото с помощта на тялото, тъй като тя не винаги е по цялата височина на прозореца на браузъра). Молим фоново изображение елемент HTML, това центриране, изберете фиксирана позиция (фиксирана) и ще коригира размера на изображението, използвайки свойствата фон размер, които определят, че на корицата:

HTML <
фон: URL (снимки / bg.jpg) не-повторение център център фиксиран;
-WebKit-фон размер: капак;
-Moz-фон размер: капак;
-о-фон размер: капак;
фон размер: капак;
>

Изпълнете тази опция ще бъде:

* Safari 3+
* Chrome всяка версия
* IE 9+
* Opera 10+ (Opera 9.5 поддържа фон размери, но не поддържа корицата)
* Firefox 3.6+ (Firefox 4 поддържа фон размер собственост като -moz префикс)

Има и решение за IE, но бъдете внимателни - смята се, че след прилагането на някои от връзките на страницата не работят. Ако това се случи - се опитват да използват този код е да се блокира HTML или тялото, но до съдържащ DIV, но ширината и височината на 100%. Това е кода:

филтър: ProgID: DXImageTransform.Microsoft.AlphaImageLoader (SRC = 'myBackground.jpg.', sizingMethod = 'скала);
-MS-филтър: "ProgID: DXImageTransform.Microsoft.AlphaImageLoader (SRC = 'myBackground.jpg', sizingMethod = 'мащаб") ";

CSS само. опция №1

В този пример ще използваме IMG елемент, който е лесно да се промени размера на всеки браузър. Ние ще използваме свойството мин височина за запълване на прозореца на браузъра вертикално и се определят с ширина от 100%, за да направи същото хоризонтално. Също така ви молим мин ширина на изображението не стане по-малко, отколкото е всъщност.

/ * Създаване на пропорционален мащабиране * /
ширина: 100%;
височина: автоматичен;

/ * Създаване на позициониране * /
позиции: фиксиран;
Горе: 0;
лява: 0;
>

Тя работи в следните браузъри:

* Във всеки вариант на нормални браузъри: Safari / Chrome / Opera / Firefox
* Internet Explorer 6: Тя работи - но има проблеми с фиксирането на изображението
* IE 7/8: В по-голямата част работи, но не е в центъра на малки резолюции, като по този начин напълно да изпълни екрана
* IE 9: Works

CSS само. вариант №2

Има и друг сравнително лесен начин за решаване на проблема ни: да използва образа на нашата страница, за да го попитам фиксирано положение в горния ляв ъгъл и да определи мин височина и ширина мин на 100%, като същевременно се запази съотношението.

#bg <
позиции: фиксиран;
Горе: 0;
лява: 0;

/ * Съотношение Запазване aspet * /
мин ширина: 100%;
мин височина: 100%;
>

Въпреки това, той не центриране на изображението, което е важно за нас. Ние можем да се реши този проблем чрез сключване на изображението в Разделение блок. Това устройство е с размерите на 2 пъти повече, отколкото екрана на браузъра. Когато се постави на изображението в блока, той ще бъде точно в центъра на прозореца на браузъра, като се поддържа съотношението.

#bg <
позиции: фиксиран;
Горе: 50%;
левия: 50%;
широчина: 200%;
височина: 200%;
>
#bg IMG <
позиции: абсолютен;
Горе: 0;
лява: 0;
дясно: 0;
надолу: 0;
марж: автоматичен;
мин ширина: 50%;
мин височина: 50%;
>

Тази опция работи в:

* Safari / Chrome / Firefox (вероятно не всички от старата версия)
* IE 8+
* Opera (всички версии) и IE, както разбирайте погрешно код (неправилно позициониране не е ясно защо)

Вариант програми, включени с JQuery