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 i background-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 til no-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

Abonnér på nyhedsbrev
Søg på siderne
Anbefal siden til en ven

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.