Погледајте данас популарне веб локације и један од дизајнерских третмана који ћете сигурно видети су велике позадинске слике које се простиру на екрану. Један од изазова са додавањем ових слика долази из најбоље праксе да веб локације морају да одговоре на различите величине екрана и уређаја - приступ познат као прилагодљив веб дизајн.
Једна слика за многе екране
Будући да се изглед ваше веб странице мења и прилагођава различитим величинама екрана, тако и ове позадинске слике морају у складу са тим да прилагођавају своју величину. У ствари, ове „флуидне слике“ су један од кључних делова одговарајућих веб локација (заједно са флуидном мрежом и медијским упитима). Та три дела су од самог почетка основни елемент прилагодљивог веб дизајна, али иако је одувек било прилично лако додати прилагодљив дизајн уметнуте слике на веб локацију (уметнуте слике су графике које су кодиране као део ХТМЛ ознаке), радећи исто са позадинским сликама (које су обликовани на страници користећи ЦСС својства позадине) већ дуго представља значајан изазов за многе веб дизајнере и фронт енд програмери. Срећом, додавање својства „бацкгроунд-сизе“ у ЦСС је то омогућило.
У посебном чланку смо описали како се користи Величина позадине својства ЦСС3 за развлачење слика да стану у прозор, али постоји још бољи, кориснији начин примене за ово својство. Да бисмо то урадили, користићемо следећу комбинацију својстава и вредности:
величина позадине: поклопац;
Својство кључне речи цовер омогућава прегледачу да прилагоди слику тако да стане на прозор, без обзира на то колико је велик или мали тај прозор. Слика се скалира тако да покрива цео екран, али оригинални пропорције и однос ширине и висине остају нетакнути, спречавајући изобличење саме слике. Слика се поставља у прозор што је могуће већи тако да је покривена цела површина прозора. То значи да на страници нећете имати празних места или изобличења на слици, али такође значи да се нека слика може смањити, у зависности од омјера слике на екрану и слике у питање. На пример, ивице слике (било горње, доње, лево или десно) могу бити одсечене на сликама, у зависности од вредности које користите за својство положаја позадине. Ако усредсредите позадину у „леви горњи део“, сав вишак на слици ће се уклонити са доње и десне стране. Ако центрирате позадинску слику, вишак ће се отпустити са свих страна, али пошто се тај вишак раширио, утицај на било којој страни биће мањи.
Како се користи „бацкгроунд-сизе: цовер;“
Када креирате позадинску слику, добра идеја је да направите прилично велику слику. Иако прегледачи могу да умање слику без приметног утицаја на визуелни квалитет, када прегледач увећа слике веће од оригиналних димензија, визуелни квалитет ће се погоршати, постати замућен и пикселизиран. Лоша страна овога је што ваша страница постиже хит перформанси када испоручујете џиновске слике на све екране. Када то учините, побрините се за правилно припремите те слике за брзину преузимања и веб испоруку. На крају, морате пронаћи срећни медиј између довољно велике величине слике и квалитета и разумне величине датотеке за брзине преузимања.
Један од уобичајених начина коришћења скалирања слика у позадини је када желите да та слика заузима целу позадину странице, без обзира да ли је та страница широка и гледа ли се на рачунару или много мања и шаље ли се на ручни мобилни уређај уређаји.
Отпремите своју слику на веб домаћин и додајте је у ЦСС као позадинску слику:
позадина-слика: урл (ватромет-преко-вдв.јпг);
позадина-понављање: без понављања;
положај позадине: центар центар;
позадина-прилог: фиксно;
Прво додајте ЦСС са префиксом прегледача:
-вебкит-бацкгроунд-сизе: цовер;
-моз-бацкгроунд-сизе: цовер;
-о-бацкгроунд-сизе: поклопац;
Затим додајте својство ЦСС:
величина позадине: поклопац;
Коришћење различитих слика које одговарају различитим уређајима
Иако је одзивни дизајн за радну површину или преносни рачунар важан, разноликост уређаја који могу да приступе Интернету знатно је порастао и долази до веће разноликости екрана то.
Као што је претходно поменуто, учитавање веома велике слике у позадини која реагује на паметни телефон, на пример, није ефикасан дизајн или дизајн који се бави ширином појаса.
Научите како можете да користите медијски упити за приказивање слика које ће бити прикладне за уређаје на којима ће бити приказани и додатно побољшати компатибилност ваше веб локације са мобилним уређајима.