Jørgen Farum Jensens
Noter om baggrundsgrafik
Websiden og websidens elementer kan forsynes med en grafisk baggrund.
Denne artikel gennemgår en række af de forskellige muligheder, du har for at forsyne dine websider eller dele af websiden med en grafisk baggrund.
Mange af de følgende eksempler og forklaringer er baseret på den grundlæggende stylesheet kode for formen på et elements baggrund.
[element] { background-color: #rrggbb; background-image: url([sti]baggrund.png); background-repeat:repeat; background-attachment:scroll; background-position: x y; }
I ovenstående repræsenterer:
- [element]
- et vilkårligt html-element. Det vil hyppigt være et
div
-element med et indhold af tekst og eventuelt billeder, men kan som sagt være et vilkårligt element. - background-color
- elementets baggrundsfarve. Denne vil kunne ses, hvis det grafiske element – her baggrund.png – indeholder transparente områder, eller hvis baggrundsgrafikken ikke udfylder hele elementets baggrund. Se noten længere nede i artiklen om syntaksen for denne formregel (i afsnittet om kortformsudgaven af formdeklarationen). Farvekoden kan være en navngiven farve, farve hexkoder, farve rgb koder eller farveprocenter.
- background-image
- formreglen, der indsætter grafikken. [sti] repræsenterer den absolutte eller relative sti mellem folderen, hvori grafikken befinder sig og folderen, hvori stylesheet'et befinder sig. Altså ikke folderen, hvori websiden befinder sig.
- Formatet på grafikken kan være .gif, .jpg eller .png, sidstnævnte med en alfakanal, omend Internet Explorer for nærværende ikke gengiver delvis transparens.
- background-repeat
- der bestemmer, hvorledes fliselægning skal foregå. Følgende
værdier kan anvendes:
repeat
,no-repeat
,repeat-y
,repeat-x
. - background-attachment
- der bestemmer, om baggrundsgrafikken er knyttet til dokumentet
eller til browservinduet. De to værdier, der kan komme på tale, er
1.background-attachment: scroll;
, der er standardværdien, og som bevirker, at baggrundsbilledet scroller med dokument, når browserens rulleskakter aktiveres, og
2.background-attachment: fixed;
, der bevirker, at baggrundsgrafikken bliver stående på samme sted i browservinduet, uanset om der scrolles. - background-position
- x og y koordinaterne for baggrundsgrafikkens placering, eller i tilfælde af fliselægning, hvor fliselægningen skal begynde.
- x og y kan gives værdier i pixel, procenter samt nøgleordene left, center, rigt, top, center, bottom.
- Standardværdien er left top, det vil sige, hvis background-repeat er sat til no-repeat, og der ikke er angivet nogen værdi for background-position, vil grafikken blive placeret i elementets øverste venstre hjørne.
- Hvis nøgleordet
center
indgår ibackground-position
værdierne, eller hvis der anvendes procenter, skal rækkefølgen være x y – altså først den vandrette koordinat og dernæste den lodrette koordinat.
Fliselægning
En grafik, hvis arealmæssige udstrækning er mindre end arealet af det element, for hvilket grafikken skal danne baggrund, fliselægges.
Denne fliselægning kan kontrolleres ved hjælp af de ovennævnte egenskaber.
Herunder ser du et antal links til nogle eksempler på, hvad dette kan føre til.
Alle eksemplerne viser indsætning af en baggrundsgrafik i elementet div#indhold, der udgør indholdsdelen af en løst skitseret skabelonside.
I højre kolonne i eksemplerne ser du den formdeklaration, der vedrører eksemplet.
- Flisegrafik fliselagt
- Eksempel 1: Standardvisningen uden supplerende formregler.
- Flisegrafik uden fliselægning
- Eksempel 2:
background-repeat
sat tilno-repeat
. - Positioneret flisegrafik uden fliselægning
- Eksempel 3: Positionering foretages
med
background-position
. - Positioneret flisegrafik uden fliselægning
- Eksempel 4: Grafikken er højrestillet og lodret midtstillet.
- Lodret fliselægning
- Eksempel 5: Grafikken fliselægges
lodret i venstre side med repeat-y. Bemærk, at fliselægningen sker i
hele det overordnede elements højde, uanset hvilken y-værdi, vi har
sat for
background-position
. - Lodret fliselægning
- Eksempel 6: Grafikken fliselægges
lodret i højre side med repeat-y. Bemærk, at fliselægningen sker i
hele det overordnede elements højde, uanset hvilken y-værdi, vi har
sat for
background-position
. - Vandret fliselægning
- Eksempel 7: Grafikken fliselægges
vandret foroven med repeat-x. Bemærk, at fliselægningen sker i
hele det overordnede elements bredde, uanset hvilken x-værdi, vi har
sat for
background-position
. - Vandret fliselægning
- Eksempel 8: Grafikken fliselægges
vandret forneden med repeat-x. Bemærk, at fliselægningen sker i
hele det overordnede elements bredde, uanset hvilken x-værdi, vi har
sat for
background-position
.
Vandmærke
Den teknik, der skaber de effekter, jeg har vist i de foregående
eksempler, amvendes ofte til at lave et “vandmærke” på
websiden. Eksempel 9 viser hvordan det
kan tage sig ud. Vandmærket
kan naturligvis placeres vilkårligt - dels gennem at vælge, hvilket
element, det er, der forsynes med vandmærket (i eksemplet er det
fortsat div#indhold
, der må lægge for, i modsætning til
det mere almindelige, at vandmærket indsættes som en egenskab ved
body
-elementet), dels ved at vælge nogle andre værdier for
x- og y-koordinaterne.
I eksempel 9a har jeg vist, hvorledes vandmærket tager sig ud, hvis det knyttes til body-markøren og låses til midten af browservinduet ved hjælp af background-attachment:fixed;
Baggrund for tekstelementer
De foregående eksempler handler alle om baggrunden for et
layout-element, i det aktuelle tilfælde div#indhold
elementet.
Men der er intet til hinder for at bruge en fliselægning som baggrund for et tekstelement, jf. eksempel 10.
I dette eksempel er det værd at lægge mærke til, hvad der sker med
baggrundsgrafikken, når tekstelementet ændrer bredde som følge af
øgning eller mindskning af browservinduets bredde. Det er ret tydeligt,
at grafikken beskæres fra højre. Indsætter jeg en background-position
,
der starter fliselægningen i højre side, vil grafikken blive beskåret
fra ventre. Eksempel 10a.
Disse observationer har vi brug for, når vi skal prøve at bruge billeder, og ikke blot grafiske fliser, som baggrund.
Billeder som baggrund
Med undtagelse af eksempel 9 har jeg i alle de foregående eksempler brugt en grafik, der er egnet til fliselægning, og hvis udstrækning så godt som altid vil være mindre end udstrækningen af det element, grafikken danner baggrund for.
Der er imidlertid intet til hinder for at bruge et egentligt billede som baggrund for for eksempel en menuspalte, jf. eksempel 11. Billedet her er 250 pixel bredt og ca. 900 pixel højt.
Bemærk i dette eksempel, at background-position
-egenskaben bestemmer,
at billedet skal beskæres nedefra, hvis det ikke kan vises i sin fulde
højde. Bemærk endvidere brugen af background-attachment
, der fikserer
billedet i browservinduet, uanset om der scrolles. Alternativet er
background-attachment: scroll
, hvor billedet scroller med
resten af dokumentet. Der består så den fare, at billedet slipper op,
hvis websidens indhold betinger, at der skal scrolles meget langt ned
(Jf. eksempel 12). Det ser jo ikke særlig
pænt ud, men kan forbedres ved at tone billedet ud i baggrundsfarven,
subsidiært lave en flise af billedets øverste eller nederste del og
fliselægge denne som endnu en baggrund. Denne ekstra baggrund skal
så have sit eget element.
Billeder som banner
Ganske som vi kunne lave en grafisk baggrund for en menuspalte kan vi lave et banner (sidehoved) med en grafisk baggrund. På sæt og vis er det lettere at have med at gøre end den lodretstillede baggrund, hvilket jeg demonstrerer i eksempel 13.
Hvis vi overvejer forskellen på denne måde at indsætte et
baggrundsbillede på og indsætning af billedet ved hjælp af
img
-markøren, kunne man tro, at den sidstnævnte metode
er mindre fleksibel. Trods alt har billedet jo en vis udstrækning
givet ved width
og height
.
Som jeg har påvist i artiklen
Fleksible billedstørrelser kan du imidlertid sagtens undlade
width
og height
-attributterne til
img
-markøren og i stedet sætte en bredde i procent i en
stylesheet formdeklaration. Så vil billedets bredde ændre sig i takt
med browservinduets bredde, og højden vil ændre sig proportionalt med
bredden.
I eksempel 14 har jeg indsat det samme billede som jeg brugte i eksempel 13, men her indsat på den netop beskrevne måde, men med en fast højde på billedet. Denne metode medfører, at hele billedet vil kunne ses, uanset browservinduets bredde. Det klemmes blot sammen på tværs.
Kortformsudgaven
Der findes en kortformsudgave af baggrundsegenskaben:
background: background-color-værdi background-image-værdi background-repeat-værdi background-attachment-værdi background-position-værdi
Som i alle kortformsreglerne for css-egenskaber skal egenskaberne
nævnes i en bestemt orden, det vil sige den her viste. Det er ikke
nødvendigt at medtage alle egenskaber. Udelades egenskaber, skal det
ske “bagfra”. Den minimale background
-formregel
bliver således background: #rrggbb;
, mens hele den
tyrkiske musik, som jeg indledte denne artikel med, i kortformsudgaven
bliver til:
background: #rrggbb url([sti]baggrund.png) repeat scroll x y;
Bemærk, kun mellemrum mellem værdierne.
Jeg har vænnet mig til så godt som altid kun at skrive
background: #rrggbb;
for formreglen for farven på baggrunden.
Det kan føre til den ubehagelige overraskelse, at baggrundsgrafikken
slet ikke vises. I begyndelsen kunne jeg slet ikke forstå hvorfor, men
det er naturligvis fordi background: #rrggbb;
implicit
udelukker visningen af grafikken.
Husk derfor altid, hvis du skal give et element både en grafisk
baggrund og en baggrundsfarve, og ikke benytter kortformsudgaven,
at sætte din baggrundsfarve med den fuldstændige formregel:
background-color: #rrggbb;
(eller hvilken farveangivelse du
nu foretrækker).
Inden jeg når til vejs ende med gennemgangen af de forskellige metoder til
at skabe en grafisk baggrund for websiden eller for visse elementer på
websiden, vil jeg henlede din opmærksomhed på en lidet påagtet effekt af
background-atachment: fixed;
background-attachment
Indsættes et baggrundsbillede i et element på websiden, og gives
dette billede egenskaben background-attachment: fixed
, vil
billedet blive placeret i browservinduet i henhold til
værdierne af background-position
, men kun den del af
baggrundsbilledet, som ligger under det element, som har fået
baggrundsbilledet som egenskab, er synlig.
Når effekten er upåagtet skyldes det nok, at Internet Explorer ikke fortolker egenskaben korrekt, denne browser vil kun acceptere fixed-værdien for body-markøren.
Jeg har lavet to eksempelsider, der skal illustrere denne effekt:
For at få noget ud af eksempel 15 skal
du bruge en moderne browser, der ikke er Internet Explorer.
Har du kun den browser har jeg to meddelelser til dig:
1) Skynd dig at downloade en ordentlig browser, f.eks.
Firefox og
2) Mens den downloader, kan du med din Internet Explorer se på
eksempel 16, hvor jeg ved hjælp af
Dean Edwards' IE7 patch har givet eksempelsiden evnen til også at fortolke
også background-attachment:fixed
korrekt.
Jeg har skrevet lidt mere om denne sag i artiklen: background-attachment:fixed, hvor jeg dels demonstrerer, hvorledes egenskaben kan bruges til at skabe en unik grafisk effekt på en rollover, og dels viser,hvorledes du kan opnå, at effekten også fungerer i Internet Explorer.
25. juni 2005
Webdesign – illustreret håndbog
– er i løbet af kort tid slået igennem som grundbogen for dem, der ønsker at lære sig websidekonstruktion, og tillige ønsker at gøre det på en håndværksmæssig solid måde. Køb den hos forlaget Globe.
Online support
Hvis du bliver abonnent på mit nyhedsbrev får du øjeblikkelig e-mail opdatering i tilfælde af rettelser eller uddybende forklaringer til eksempler og beskrivelser mine bøger.
Samtidig får du også gennem disse nyhedsbreve besked om nye og opdaterede artikler på dette websted.
Du kan læse mere om denne sag på websiden Nyhedsbrev.