Как да се простират на фоновото изображение на цялата ширина на единица, екран, проектирането и разработването на сайта

Добър ден. 🙂

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

Аз се разрови помня много информация и се опита доста начини, докато не намери името на едно решение, което трябваше да е в момента.

По-долу ще ви покажа 3 начина да се простират на фона на целия екран.

Първият метод използва чист CSS3. Всичко идва от имот фон-размер. В моя случай, аз ще го разтеглите на целия екран, което означава, ПОДХОДЯЩИ свойства на тялото маркер. Можете да кандидатствате, както е необходимо, за да блокира например.

Опънете целия екран ще бъде тук на тази снимка с сладко момиче 🙂

Както е определено с общ блок, който определя стилове и стил лист файл добавя даден блок, следния код:

Както можете да видите във фонов режим добавите параметър пътя до изображението и определя позицията на изображението на екрана. В този случай, център и отгоре. Това означава, че картината ще бъде в центъра на екрана, и натисна карането му към горната част на екрана. Това е да се гарантира, че винаги се вижда лицето на момичето. Ако искате абстрактна или природата, където можете да видите небето, полето, хоризонта, ние може да достави стойност център и център. По принцип, ако сте запознати с CSS, мисля, че ще бъдат демонтирани. Също да зададете фиксиран. която ще направи снимката.

Методът е много прост, да го използвам винаги и това ме устройва на 100%. Има само едно нещо. По-стари браузъри не са запознати с на CSS3, така че тези, които използват старата версия няма да видите правилното резултат.

Този метод използва конвенционален CSS. В действителност, много проста. Заключения В тялото на изображението, като определя идентификационен номер на сайта - BG:

И предписва стилове:

Фиксирано позициониране и разтягане пропуски за цялата ekran.Vot толкова просто :).

Има използва JQuery. Ето защо, ние първо трябва да се включат в библиотеката, ако то не е свързано преди.

След свързване на сценария на библиотеката, която ще мащабираме фон

Освен това, както вече бе във втория метод, сайтът в тялото, изображение и да го зададете идентификатор, като бг.

А в края ние добавяме стилове, за да всичко да работи. Вие отворите файл от стилове и добавете следния код:

Чрез Style може да се види, че ние добавихме позициониране. В този случай тя е фиксирана. Изображение, докато превъртате остава неподвижен фон, но ако промяната в позиционирането на абсолюта. на заден план може да се превърта. Между другото, същото може да се направи с първите два метода.

Също така определен параметър - Z-индекс: 1. така че картината е на текста. Ако имате текст, който трябва да бъде в предната част, можете да премахнете тази опция.

Кой метод да използвате, вие решавате. Както бе споменато по-горе, аз съм по-близо първия метод. Той е най-простите и не по-лошо, отколкото други.

Това е всичко, благодаря ви за вниманието. 🙂

Ако сте били от полза за работата си, можете да подкрепят сайта :)

Здравейте скъпи приятели

Имате AdBlock инсталирано разширение или други подобни. Добавете сайта си в белия списък, и по този начин да допринесе за vnesesh неговото развитие. Инструкции за това как да деактивирате AdBlock искат този прозорец