Водич за ЦСС величину позадинске слике - Како кодирати позадинску слику целе странице

Овај водич ће вам показати једноставан начин кодирања слике позадине целе странице помоћу ЦСС-а. Такође ћете научити како ту слику прилагодити величини екрана ваших корисника.

Чињеница да се слика у позадини у потпуности протеже тако да покрива читав приказ прегледача је уобичајени задатак у веб дизајну. Срећом, овај задатак се може решити са неколико редова ЦСС-а.

Покријте прозор за приказ сликом

Прво ћемо желети да се уверимо да наша страница заправо покрива читав приказ:

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); } } 

Можете да користите Пхотосхоп или неки други софтвер за уређивање слика да бисте смањили величину оригиналне слике да бисте побољшали брзину учитавања странице на мобилним Интернет везама.

Дакле, сада када знате чаролију стварања одзивне позадине слика на целој страници, време је да кренете у прављење лепих веб локација!

Желите да видите више савета и знања за веб развој?

  • Претплатите се на мој недељни билтен
  • Посетите мој блог на 1000 Миле Ворлд
  • Запрати ме на твитеру