Gitt Är Websäit visuell Interesse mat der Background Grafik
Biller sinn e wichtege Bestanddeel vun attraktiven Websäiten. Dëst beinhalt d'Verwäertung vun Backgrounddeel. Dëst sinn d'Biller an d'Grafiken, déi hannert Gebidder vun enger Säit benotzt ginn, am Géigesaz zu Biller, déi als Deel vun den Inhaltsseiten presentéiert ginn. Dës Backgrounddeelunge kënne visuell Interesse vun enger Säit addéieren an hëllefen Iech den visuellen Design z'erreechen datt Dir op enger Säit gesitt.
Wann Dir ugefangen ze schaffen mat Hannergrond Biller, wäerte Dir zweiflech an de Szenario lafen fir datt Dir e Bild ausdehnt fir op dës Säit ze passen.
Dëst gëllt speziell fir reagéiert Websäiten déi an eng breet Palette vun Apparater a Schirmgrßen geliwwert ginn .
Dëse Wëllen fir e Retro-Biller ze strecken ass e ganz allgemenge Lust fir Webdesigner, well net all Bild passt am Plaatz vun enger Websäit. Amplaz vun enger fixer Gréisst z'änneren, gëtt et d'Bild erstallt datt se flexibel seet d'Säit egal wéi wäit oder eng d'Browserfenêt ass.
Déi bescht Method, fir e Bild ze vergréisseren fir den Hannergrond vun enger Säit ze passen ass d' CSS3- Eigenschaft, fir d'Backgroundgréisst. Hei ass e Beispill déi benotzt en Hannergrond fir den Kierper vun enger Säit an déi d'Gréisst op 100% setzt, sou datt et ëmmer ze strecken fir de Bildschierm opzemaachen.
Kierper {
Hannergrond: url (bgimage.jpg) nee -widderhuelen;
Hannergréisst: 100%;
}}
Laut Caniuse.com funktionnéiert dës Immobilie an IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+, an op all déi gréissten mobil Browseren. Dëst deckt Iech fir all déi modern Brochure vir, déi Dir elo gitt, dat heescht datt Dir dëst Eegent benotze kënnt ouni Angscht datt et net op eng Kaart kënnt.
Fänken e gestresste Background am alen Browser
Et ass ganz onwahrscheinlech datt Dir e Browser méi al wéi IE9 brauche brauch, awer lass eis ugeholl datt Dir Ierch besuergt datt IE8 dës Eigenschaft net ënnerstëtzt. An dësem Fall kënnt Dir en ausgedehnter Hannergrond faken. An Dir kënnt d' Browser-Präfixe fir Firefox 3.6 benotzen (-moz-background-size) an Opera 10.0 (-o-Background-Gréisst).
Déi einfachst Méiglechkeet, e gestreckten Hannergrondbild z'erfëllen ass et aus der ganzer Säit ze strecken. Da klëmmt et net mat extra Raum oder muss sech Gedanken maachen datt Äre Text an der ausgedehnter Géigend passt. Hei ass wéi et maacht:
id = "bg" />
- Erkennen Sie sécher, datt all Browser eng 100% héich Héicht, 0 Ronnen, an 0 Polstere vun den HTML KODÉIEREN Elementer. Plaz déi folgend am Kapp vun Ärem HTML Dokument:
- Fügen Sie de Bild datt Dir de Background als éischt Element vun der Websäit wëllt an du bass d' Id vu "bg":
- Positiv den Hannergrond fir datt et op der Spëtzt an lénks ass an 100% grouss an 100% an der Héicht fixéiert. Setzt dës un Äre Stäip un:
img # bg {
Positioun: fix;
: 0;
lénks: 0;
Breet: 100%;
Héicht: 100%;
}} - Dodéiert all Ären Inhalt op der Säit an engem DIV-Element mat enger Id vu "Inhalt". Fuert den DIV ënnert dem Bild:
Note: et interessant sech elo op Är Säit kucken. D'Bild soll sech ausgedréckt uginn, awer Ären Inhalt ass komplett fehlt. Firwat? Well den Hannergrond Bild ass 100% an der Héicht, an d'Inhalt Divisioun ass nom Bild am Fluss vum Dokument - d'meescht Browser sinn et net.All Är Inhalt ass - och Header, Absätze etc.
- Positiv Äre Inhalt, sou datt et relativ an e Z-Index vun 1 ass. Dëst bréngt et virun dem Background Bild an Standards-konforme Browser. Setzt dës un Äre Stäip un:
#content {
Positioun: relativ;
z-Index: 1;
}}
- Awer Dir sidd net gemaach. Internet Explorer 6 ass net Standards konform an nach ëmmer Problemer. Et gi vill Méiglechkeeten fir de CSS aus all Browser ze verstoppen, mee IE6, awer déi einfachst (a mannst wahrscheinlech fir aner Probleemer ze verursachen) ass bedinglech Kommentaren. Setzt d'folgend Lëscht no Ärem Stylesheet am Kapp vun Ärem Dokument:
- An den markéierter Kommentar, addéiere aner stylesch Blat mat e puer Stiler fir IE 6 ze kréien fir gutt ze spillen:
- Maacht sécher, an IE 7 an IE 8 ze testen. Dir musst d'Kommentaren maache fir se ze ënnerstëtzen. Allerdéngs huet et geschafft, wéi ech et testéiert hunn.
OK - et ass iwwregens WAY-Overkill. E ganz wéine Site muss IE 7 oder 8 ënnerstëtzen, méi IE6!
Als Uleedung ass dës Approche antiquéiert a wahrscheinlech onnéideg fir Iech. Ech liesen et hei méi wéi e Model vu Kurioses wéi sou vill méi schwéier Saache waren, ier all eis Browsers sou gutt zesumme gespillt hunn!
Fänkt e gestreckten Hannergrond Bild Méi iwwer e klengt Raum
Dir kënnt eng ähnlech Technik benotzen fir e ausgedehnte Backgroundbild iwwer engem DIV oder engem aneren Element op der Websäit ze gefalen. Dëst ass e bësse méi trickier wéi Dir musst mat absoluter Positionéierungsplaz oder ongewéinlecher Distanzéierungsproblemer fir aner Deeler vun Ärer Säit benotzen.
- Plaz d'Bild op der Säit, déi ech als Background benotze wëllt.
- Am Stilbicher setzen Sie eng Breet an Héichte fir d'Bild. Remarkéiert, kënnt Dir Prozentën fir Breet oder Héicht benotzen, awer ech fannen et méi einfach, mat Längtewerten aus der Héicht anzebezéien.
img # bg {
Breet: 20em;
Héicht: 30em;
}} - Plaz Är Inhalt an enger Div mat der id "Inhalt" wéi mir et virdru gemaach hunn:
All Är Inhal sinn hei
- Stil den Inhalt div op d'selweschten Breet an Héichte wéi den Hannergrond:
div # Inhalt {
Breet: 20em;
Héicht: 30em;
}} - Sëtzt dann den Inhalt op déi selwecht Héicht wéi d'Bild. Also wann Är Bild mat 30em ass, hues du e Stil uewen: -30em; Vergiesst net datt en z-Index vun 1 am Inhalt gëtt.
#content {
Positioun: relativ;
: -30em;
z-Index: 1;
Breet: 20em;
Héicht: 30em;
}} - Fuert an engem Z-Index vun -1 fir IE 6 Benotzer, wéi Dir et gemaach hutt:
Elo, mat der Hannergréisst vun der grousser Browser-Support genéissen se elo och dës Approche och ganz wahrscheinlech net noutwendeg a gëtt als Produkt vun enger verëffentlecht Ära entwéckelt. Wann Dir dës Approche wëllt benotze wëllt, einfach vir kucken ob esou vill Browser wéi Dir kënnt.
A wann Äre Inhalt Inhalt gréisstent, musst Dir d'Gréisst vum Container an den Hannergrond änneren, andeems Dir mat komëschen Ergebnisser kënnt.