Дајте свој вебсајт визуелном интересовању са позадинском графиком
Слике су важан део атрактивних веб дизајна. Ово укључује кориштење позадинских слика. Ово су слике и графике које се користе иза подручја странице за разлику од слика које су представљене као дио страница са садржајем. Ове позадинске слике могу додати визуелни интерес за страницу и помоћи вам да постигнете визуелни дизајн који можда тражите на страници.
Ако почнете да радите са позадинским сликама, несумњиво ћете започети сценарио у коме желите да се слика истегне како би одговарала страници.
Ово је посебно важно за одговарајуће веб странице које се испоручују широком спектру уређаја и величинама екрана .
Ова жеља да се прошири слика у позадини је врло честа жеља за веб дизајнерима јер свака слика не уклапа се у простор веб странице. Уместо подешавања фиксне величине, растезање слике омогућава му да се прилагоди страници, без обзира на то колико је широк или сужен прозор прегледача .
Најбољи начин за истицање слике која одговара позадини странице је кориштење ЦСС3 особине за величину позадине. Ево примера који користи позадинску слику за тијело странице и који поставља величину на 100%, тако да ће се увијек истегнути како би се прилагодио екрану.
боди {
бацкгроунд: урл (бгимаге.јпг) но-репеат;
бацкгроунд-сизе: 100%;
}
Према цаниусе.цом, ова некретнина ради у ИЕ 9+, Фирефок 4+, Опера 10,5+, Сафари 5+, Цхроме 10,5+ и на свим главним претраживачима за мобилне уређаје. Ово вас покрива за све савремене претраживаче доступне данас, што значи да бисте требали користити ову особину без бојазни да неће радити на нечијем екрану.
Факинг а Стретцхед Бацкгроунд ин Олдер Бровсерс
Мало је вероватно да ћете морати да подржите било који прегледач старији од ИЕ9, али претпоставимо да сте забринути због тога што ИЕ8 не подржава ову особину. У том случају можете подигпати истегнуту позадину. И можете користити префиксе претраживача за Фирефок 3.6 (-моз-бацкгроунд-сизе) и Опера 10.0 (-о-бацкгроунд-сизе).
Најлакши начин за лажирање истегнутог позадинског имиџа је да га проширите на целу страницу. Онда не завршите са додатним простором или морате бринути да се ваш текст уклапа у растегнуто подручје. Ево како то учинити:
ид = "бг" />
- Прво, уверите се да сви прегледачи имају 100% висину, 0 марже и 0 паддинг на елементима ХТМЛ БОДИ. Поставите следеће у главу вашег ХТМЛ документа:
- Додајте слику коју желите да буде позадина као први елемент веб странице и дајте је ид бг-а:
- Поставите позадинску слику тако да је фиксиран на врху и лијево и 100% широк и 100% у висини. Додајте ово у свој стилски стил:
имг # бг {
позиција: фиксна;
горе: 0;
лево: 0;
ширина: 100%;
висина: 100%;
} - Додајте сав свој садржај на страницу унутар елемента ДИВ са ид-ом "садржаја". Додајте ДИВ испод слике:
Напомена: занимљиво је гледати на вашу страницу. Слика би требало да се истакне, али ваш садржај потпуно недостаје. Зашто? Пошто је позадинска слика висока 100%, а дељење садржаја је након слике у протоку документа - већина претраживача то неће приказати.Сви ваши садржаји овдје - укључујући заглавља, параграфе, итд.
- Поставите свој садржај тако да је релативан и има з-индекс од 1. Ово ће га пренијети изнад позадинске слике у претраживачима који одговарају стандардима. Додајте ово у свој стилски стил:
#цонтент {
позиција: релативна;
з-индекс: 1;
}
- Али ниси завршио. Интернет Екплорер 6 није усклађен са стандардима и има још проблема. Постоји много начина сакривања ЦСС-а из сваког претраживача, али ИЕ6, али најлакши (а најмање највероватније изазвати друге проблеме) је кориштење условних коментара. Ставите следеће после вашег стилесхеета у главу вашег документа:
- Унутар истакнутог коментара додајте још један стилски стил са неким стиловима како бисте играли лепо за ИЕ 6:
- Обавезно тестирајте и ИЕ 7 и ИЕ 8. Можда ћете морати да прилагодите коментаре и да их подржите. Међутим, радио је када сам га тестирао.
ОК - ово је уствари ВАИ оверкилл. Веома мало сајтова треба више да подржава ИЕ 7 или 8, много мање ИЕ6!
Као такав, овај приступ је застарјиван и вероватно непотребан за вас. Остављам га овде више као модел радозналости о томе колико су теже ствари пре него што су сви наши прегледачи играли тако лепо заједно!
Факинг ан ектендед имаге бацкгроунд овер а смаллер спаце
Можете користити сличну технику за лажну истегнуту слику позадине преко ДИВ-а или неког другог елемента на вашој веб страници. Ово је мало сложенији јер морате користити апсолутно позиционирање или имати чудне размаке између размака за друге дијелове ваше странице.
- Поставите слику на страницу коју желим користити као позадину.
- У таблу за стил поставите ширину и висину слике. Напомена, можете користити проценте за ширину или висину, али сматрам да је лакше прилагодити вриједностима дужине за висину.
имг # бг {
ширина: 20ем;
висина: 30ем;
} - Поставите свој садржај у див са ид "садржај" као што смо већ рекли:
Сви ваши садржаји овде
- Стави садржај див да буде исте ширине и висине као слика позадине:
див # цонтент {
ширина: 20ем;
висина: 30ем;
} - Затим поставите садржај на исту висину као и слика. Дакле, ако је ваша слика 30ем, имат ћеш стил топ: -30ем; Не заборавите ставити з-индекс од 1 на садржај.
#цонтент {
позиција: релативна;
топ: -30ем;
з-индекс: 1;
ширина: 20ем;
висина: 30ем;
} - Затим додајте з-индекс од -1 за кориснике ИЕ 6, као што сте већ урадили:
Опет, са позадинским величинама које уживају у широкој подршци претраживача, сада то чини, овај приступ је врло вероватно непотребан и представљен као производ из прошлости. Ако сте желели да користите овај приступ, само обавезно тестирајте ово у оном броју претраживача колико можете.
А ако се ваш садржај промени величине, мораћете да промените величину контејнера и позадинску слику, у супротном, завршићете са чудним резултатима.