Hvernig á að teikna bakgrunnsmynd til að passa vefsíðu

Gefðu vefsíðu þinni sjónrænum áhuga með bakgrunnsmyndum

Myndir eru mikilvægir hluti af aðlaðandi vefhönnun. Þetta felur í sér notkun bakgrunnsmynda. Þetta eru myndir og grafík sem notuð eru á bak við svæði á síðu, í stað mynda sem eru kynntar sem hluti af innihaldssíðunum. Þessar bakgrunnsmynd geta bætt sjónrænum áhuga á síðu og hjálpað þér að ná fram sjónrænum hönnun sem þú gætir verið að leita að á síðu.

Ef þú byrjar að vinna með bakgrunnsmynd, verður þú án efa að keyra inn í atburðarásina þar sem þú vilt að myndin sé teygð til að passa við síðuna.

Þetta á sérstaklega við um móttækileg vefsvæði sem eru afhent á fjölmörgum tækjum og skjástærð .

Þessi löngun til að teygja bakgrunnsmynd er mjög algeng löngun fyrir vefhönnuði vegna þess að ekki er hver mynd í húfi á vefsíðu. Í stað þess að setja fastan stærð gerir teygja myndina kleift að beygja til að passa við síðuna, sama hversu breiður eða smærri vafrinn er.

Besta leiðin til að teygja mynd til að passa við bakgrunn síðu er að nota CSS3 eignina fyrir bakgrunnsstærð. Hér er dæmi sem notar bakgrunnsmynd fyrir meginmál síðu og sem stillir stærðina í 100% þannig að það muni alltaf teygja til að passa við skjáinn.

líkami {
bakgrunnur: url (bgimage.jpg) ekki endurtaka;
bakgrunnsstærð: 100%;
}

Samkvæmt caniuse.com virkar þessi eign í IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Króm 10.5+ og á öllum helstu farsímanum. Þetta nær yfir þig fyrir alla nútíma vafra í boði í dag, sem þýðir að þú ættir að nota þessa eign án þess að óttast að það muni ekki virka á skjánum einhvers.

Faking a stretched bakgrunnur í eldri vafra

Það er mjög ólíklegt að þú þurfir að styðja hvaða vafra sem eru eldri en IE9, en við gerum ráð fyrir að þú sért áhyggjur af því að IE8 styður ekki þessa eign. Í því tilviki getur þú falsað strekktan bakgrunn. Og þú getur notað forskeyti vafrans fyrir Firefox 3.6 (-moz-bakgrunnsstærð) og Opera 10.0 (-o-bakgrunnsstærð).

Auðveldasta leiðin til að falsa stækkaðan bakgrunnsmynd er að teygja hana yfir alla síðuna. Þá endarðu ekki með plássi eða verður að hafa áhyggjur af því að textinn þinn passar í rétti svæðisins. Hér er hvernig á að gera það:

id = "bg" />

1. Í fyrsta lagi skaltu ganga úr skugga um að allir vöfrar hafi 100% hæð, 0 marmar og 0 padding á og HTML BODY þætti. Settu eftirfarandi í höfuðið á HTML skjalinu þínu:

2. Bættu við myndinni sem þú vilt vera bakgrunnurinn sem fyrsti þáttur vefsíðunnar og gefðu upp nafnið "bg":

3. Stöðu bakgrunnsmyndina þannig að hún sé föst efst og vinstri og er 100% breiður og 100% á hæð. Bættu þessu við stílblöðina þína:

   img # bg {
   staða: fastur;
   efst: 0;
   vinstri: 0;
   breidd: 100%;
   hæð: 100%;
   }

4. Bættu öllu innihaldi þínu við á síðunni inni í DIV-frumefni með auðkenni "innihalds". Bættu DIV við neðan myndina:

   Allt efni þitt hér - þar á meðal fyrirsagnir, málsgreinar osfrv.

   Ath: Það er áhugavert að skoða síðuna þína núna. Myndin ætti að birtast rétt út, en efnið þitt vantar alveg. Af hverju? Vegna þess að bakgrunnsmyndin er 100% á hæð og innihaldseiningin er eftir myndina í flæði skjalsins - flestir vafrar munu ekki sýna það.
   
5. Staða efnið þitt þannig að það sé ættingja og hefur z-vísitölu 1. Þetta mun færa það yfir bakgrunnsmyndina í stöðlum sem eru í samræmi við kröfur. Bættu þessu við stílblöðina þína:

   #content {
   staða: ættingja;
   z-vísitala: 1;
   }

1. En þú ert ekki búinn. Internet Explorer 6 er ekki staðlað í samræmi og hefur enn nokkur vandamál. Það eru margar leiðir til að fela CSS úr öllum vafra en IE6, en auðveldast (og að minnsta kosti að valda öðrum vandamálum) er að nota skilyrt athugasemdir. Setjið eftirfarandi eftir stíll í höfuðinu á skjalinu þínu:

2. Inni í hápunktur athugasemd, bæta við öðru stíl lak með nokkrum stílum til að fá IE 6 til að spila gott:

3. Vertu viss um að prófa í IE 7 og IE 8 eins og heilbrigður. Þú gætir þurft að stilla athugasemdirnar til að styðja þá líka. Hins vegar vann það þegar ég prófa það.

Allt í lagi - þetta er vissulega WAY overkill. Mjög fáir staðir þurfa að styðja IE 7 eða 8 lengur, miklu minna IE6!

Sem slíkur er þessi nálgun öfgafullur og líklega óþarfi fyrir þig. Ég skil það frekar sem fyrirmynd af forvitni um hversu mikið erfiðara var áður en allir vafrar okkar spiluðu svo vel saman!

Faking a stretched bakgrunnsmynd yfir minni bil

Þú getur notað svipaða tækni til að falsa stækkaða bakgrunnsmynd yfir DIV eða annan þátt á vefsíðunni þinni. Þetta er svolítið trickier þar sem þú þarft annaðhvort að nota alger staðsetningu eða hafa skrýtin bilunarvandamál fyrir aðrar hliðar á síðunni þinni.

1. Settu myndina á síðunni sem ég vil nota sem bakgrunn.

2. Stilltu breidd og hæð fyrir myndina í stíll lakanum. Athugaðu, þú getur notað prósentur fyrir breidd eða hæð, en mér finnst auðveldara að stilla með lengdarmörkum fyrir hæðina.

   img # bg {
   breidd: 20em;
   hæð: 30em;
   }

3. Settu inn efni í div með auðkenni "efni" eins og við gerðum hér að ofan:

   Allt efni þitt hér

4. Stildu innihaldsefinn að sömu breidd og hæð og bakgrunnsmyndin:

   div # efni {
   breidd: 20em;
   hæð: 30em;
   }

5. Settu síðan innihaldið upp í sömu hæð og myndin. Svo ef myndin þín er 30em þá ættir þú að hafa stíl efst: -30em; Ekki gleyma að setja z-vísitölu 1 á innihaldinu.

   #content {
   staða: ættingja;
   efst: -30em;
   z-vísitala: 1;
   breidd: 20em;
   hæð: 30em;
   }

6. Bættu síðan við í z-vísitölu -1 fyrir IE 6 notendur, eins og þú gerðir hér að ofan:

Aftur, með bakgrunnsstærð og njóta breiðra vafra stuðnings það gerir nú, þessi nálgun er líka mjög líklega óþarfa og kynnt sem vara af svikum tímum. Ef þú viljir nota þessa aðferð, vertu viss um að prófa þetta í eins mörgum vöfrum og þú getur.

Og ef efnið þitt breytir stærð þarftu að breyta stærð gámsins og bakgrunnsmyndarinnar, annars muntu endar með undarlegum árangri.