Урок за размер на фоновото изображение на CSS - Как да кодирам фоново изображение на цяла страница

Този урок ще ви покаже лесен начин за кодиране на фоново изображение на цяла страница с помощта на CSS. Освен това ще научите как да направите това изображение да отговаря на размера на екрана на вашите потребители.

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

Покрийте Viewport с изображение

Първо, ще искаме да се уверим, че страницата ни действително обхваща целия изглед:

html { min-height: 100%; }

Вътре htmlще използваме background-imageсвойството, за да зададем изображението:

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

Магия на свойството „Размер на фона“

Магията се случва с background-sizeимота:

background-size: cover;

coverказва на браузъра да се увери, че изображението винаги покрива целия контейнер, в този случай html. Браузърът ще покрие контейнера, дори ако трябва да разтегне изображението или да отреже малко от ръбовете.

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

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

Как да прецизирате позицията на изображението и да избегнете облицовките

Браузърът може също да избере да показва фоновото ви изображение като плочки в зависимост от неговия размер. За да предотвратите това, използвайте no-repeat:

background-repeat: no-repeat;

За да запазим нещата красиви, ще поддържаме изображението винаги центрирано:

background-position: center center;

Това ще центрира изображението както хоризонтално, така и вертикално през цялото време.

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

html { min-height: 100%; background-image: url(image.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; } 

Как да поправя изображение на място при превъртане

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

background-attachment: fixed;

Можете да включите всички описани по-горе свойства на фона, като използвате кратка нотация:

background: url(image.jpg) center center cover no-repeat fixed;

По избор: Как да добавите медийна заявка за мобилни устройства

За да добавите малко черешка към тортата, може да добавите медийна заявка за по-малки екрани:

@media only screen and (max-width: 767px) { html { background-image: url(smaller-image.jpg); } } 

Можете да използвате Photoshop или друг софтуер за редактиране на изображения, за да намалите размера на оригиналното си изображение, за да подобрите скоростта на зареждане на страницата при мобилни интернет връзки.

Така че сега, когато знаете магията на създаването на отзивчив фон с изображение на цяла страница, е време да отидете да създадете красиви уебсайтове!

Искате ли да видите повече съвети и знания за уеб разработка?

  • Абонирайте се за седмичния ми бюлетин
  • Посетете моя блог на 1000 Mile World
  • Последвай ме в Туйтър