Jou jo webside visuele belangstelling mei eftergrûnôfbylding
Ofbyldings binne in wichtich ûnderdiel fan oantreklike webside ûntwerp. Dit befettet it brûken fan eftergrûnôfbyldings. Dit binne de ôfbyldings en grafiken dy't efter gebieten fan in side brûkt wurde as tsjinstellingen fan ôfbyldings dy't as in diel fan 'e ynhâld siden presintearre wurde. Dizze eftergrûnôfbyldings kinne fisuele belangstelling tafoegje oan in side en helpe jo it fisuele ûntwerp te realisearjen dat jo sykje op in side.
As jo begjinne mei eftergrûnôfbyldings te begjinnen, sille jo sûnder druk yn it senario dêr't jo in ôfbylding wolle om te streken om de side te passen.
Dit is spesjaal foar reaktive websiden dy't levere wurde oan in breed oanbod fan apparaten en skermgrutte .
Dizze winsk om in eftergrûnôfbylding te streken is in geweldige winsk foar webûntwerpers, om't net alle bylden yn 'e romte fan in webside pas is. Yn stee fan in fêste grutte om te skeakeljen, kin it biede om de side oan te passen, lykas breed of smel it finster fan it blêd .
De bêste manier om in ôfbylding te passen om de eftergrûn fan in side te passen is it CSS3- eigendom te brûken, foar eftergrûn-grutte. Hjir is in foarbyld dat in eftergrûnôfbylding brûkt foar it lichem fan in side en dat de grutte om 100% stelt omdat it altyd streekje sil om it skerm te passen.
lichem {
eftergrûn: url (bgimage.jpg) no-werhelje;
eftergrûn -grutte: 100%;
}
Neffens caniuse.com wurket dit eigendom yn IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, en op alle grutte mobile browsers. Dit omfetsje jo foar alle hjoeddeistige browsers dy't hjoed beskikber binne, wat betsjut dat jo dit eigendom brûke moatte sûnder eangens dat it net wurket op in skerm.
In útwreide eftergrûn yn âldere blêden fakje
It is tige ûnwislik dat jo alle âldere browsers as IE9 stypje moatte, mar leauwe dat jo belangest dat IE8 dit eigendom net stipet. Yn dat eksimplaar kinne jo in útwreide eftergrûn falle. En jo kinne de prefixes fan Firefox foar Firefox 3.6 brûke (-moz-eftergrûn-grutte) en Opera 10.0 (-o-background-size).
De maklikste manier om in útwreide eftergrûnôfbylding te foarkommen is om it oer de folsleine side te streken. Dan geane jo net opnij mei ekstra romte of moatte soargen dat jo tekst past yn it útstrekte gebiet. Hjir is hoe't jo it dwaan:
id = "bg" />
- Soargje derfoar dat alle browsers in 100% hichte hawwe, 0 margen, en 0 padding op 'e en HTML BODY-eleminten. Plak it folgjende yn 'e kop fan jo HTML dokumint:
- Foegje it ôfbylding dat jo de eftergrûn wêze moatte as it earste elemint fan 'e webside en jou it de id fan "bg":
- Stel it eftergrûnôfbylding sadat it fêst boppe en lofts fêst is en is 100% breed en 100% yn 'e hichte. Dit tafoegje oan jo stylblêd:
img # bg {
posysje: fêst;
top: 0;
links: 0;
breed: 100%;
hichte: 100%;
} - Foegje jo hiele ynhâld oan de side binnen in DIV-elemint mei in id fan "ynhâld". Foegje it DIV ûnder it byld:
Taljochting: it is nijsgjirrich om jo side no te sjen. Itôfbylding moat sjen litte útdrukt wurde, mar jo ynhâld is folslein ûntbrekt. Wêrom? Omdat it eftergrûnôfbylding 100% yn 'e hichte is, en de ynhâlddieling nei it byld yn' e stream fan it dokumint - de measte browsers sil it net sjen.Al jo ynhâld hjir - ynklusyf headers, paragrafen, ensfh.
- Stel jo ynhâld yn dat it relatyf hat en in z-yndeks fan 1 hat. Dit sil it boppe it eftergrûnôfbylding yn normearre konform browsers bringe. Dit tafoegje oan jo stylblêd:
#content {
posysje: relative;
z-index: 1;
}
- Mar jo binne net dien. Internet Explorer 6 is gjin standaard konform, en hat noch wat problemen. Der binne in protte manieren om de CSS fan elke browser lykwols IE6 te ferbergjen, mar de maklikste (en minste wierskynlik om oare problemen te feroarjen) is om bedoelde kommentaren te brûken. Set de folgjende nei jo stylblêd yn 'e holle fan jo dokumint:
- Binnen it markearre kommentaar, add another style sheet with some styles so get IE 6 to play nice:
- Tink derom yn IE 7 en IE 8 te testen. Jo meie ek de reaksje oanpasse om har ek te stypjen. It wurke lykwols as ik it besocht.
OK - dit is fansels WAY overkill. Folle pear sites moatte IE 7 of 8 mear stypje, folle minder IE6!
As sadanich is dizze oanpak âlde en wierskynlik net nedich foar jo. Ik jou it hjir mear as in nijsgjirrige model oer hoefolle hurdere dingen wiene foar al ús browsers sa moai tegearre te spyljen!
Fêst in útwreide eftergrûnôfbylding oer in lytsere romte
Jo kinne in ferlykbere technyk brûke om in útwreide eftergrûnôfbylding oer in DIV of in oare elemint op jo webside te fake. Dit is in bytsje swierder as jo moatte absolute posysjeing brûke, of frjemde ôfstânproblemen hawwe foar oare dielen fan jo side.
- Plak it byld op 'e side dy't ik as eftergrûn brûke wolle.
- Yn it stylblêd set in breedte en hichte foar it byld. Tink derom, jo kinne persintaazjes brûke foar breedte of hichte, mar ik fyn it makliker om te passen mei lingte wearden foar de hichte.
img # bg {
width: 20em;
hichte: 30em;
} - Meitsje jo ynhâld yn in div mei de id "ynhâld" as wy boppe dien hawwe:
Al jo ynhâld hjir
- Stil de ynhâld div om deselde breed en hichte te wêzen as eftergrûnôfbylding:
div # content {
width: 20em;
hichte: 30em;
} - Dêrnei stean de ynhâld op 'e selde hichte as it byld. Dus as jo ôfbylding is 30em jo hawwe in styl fan top: -30em; Ferjit net om in z-yndeks fan 1 op de ynhâld te setten.
#content {
posysje: relative;
top: -30em;
z-index: 1;
width: 20em;
hichte: 30em;
} - Dan taheakje yn in z-yndeks fan -1 foar IE 6 brûkers, lykas jo boppe dien hawwe:
Eartiids, mei eftergrûngrutte genietsje fan 'e breed blêderstipe dat no no is, is dizze oanpak ek tige wierskynlik net nedich en presintearre as produkt fan in fergeze tiid. As jo dizze oanpak brûke woe, moatte jo der wis fan wêze dat jo sa folle browsers hifkje lykas jo kinne.
En as jo ynhâld de grutte feroaret, moatte jo de grutte fan jo container en eftergrûnôfbylding feroarje, oars kinne jo mei frjemde resultaten útsette.