CSS-handboka. Bakgrunn

For at nettsidene skal sjå best mogleg ut, er bakgrunnen svært viktig. Mørk tekst på lys bakgrunn er som oftast lettast å lese. Sjølvsagt kan du eksperimentera med andre løysingar og spesielle effektar tilpassa innhaldet på sidene, men dei sidene du legg ut på nettet bør vere mest mogleg tiltalande for lesaren.

Rein html-kode er nokså avgrensa med omsyn til layout av bakgrunnen. CSS derimot gir deg høve til å bestemme bakgrunnsfargar og sjatteringar, nøyaktig plassering av bilde, bilde omkransa av tekst og mykje meir. Å lage bakgrunnar er yndlingsområdet for bruk av CSS.

Diverre har ikkje alle produsentane av nettlesarar vore like opptatte av å følgje CSS-standarden i alle tilfella. Dette gjeld spesielt Internet Explorer før versjon 7 og 8. Det sikraste er difor å prøve ut kodene dine i ein seriøs nettlesar som t.d. Firefox eller Opera og deretter eventuelt teste dei på IE lågare enn 7 dersom du ønskjer at også dei som ikkje oppdaterer nettlesaren sin skal få problem med sidene dine.

I CSS kan du definere ulike eigenskapar for korleis bakgrunnen på skjermsida eller einskilde html-taggar skal sjå ut. Instillingane er

background-color (Bakgrunnsfargen)
background-image (Bakgrunnsbilde)
background-repeat (Repeter eller ikkje)
background-attachment (Fast plassering eller rulling (scroll))
background-position (Plassering i koordinat)

Fargar i CSS

I CSS kan du angi fargar på fleire ulike måtar. Om det er ein fordel eller ei ulempe får du sjølv avgjere.

Dersom eg ikkje har rekna feil, skal alle desse gi den same fargen, men altså skrive på ulike måtar. Det første eksemplet bruker CSS-standardiserte fargenamn. I det andre eksemplet er fargen skrive i hexadesimal form. Dette blir vist med at teiknet # blir skrive framføre talet. Dei to første verdiane fortel kor mykje raudt (00 - FF) fargen inneheld, dei to midtarste mengda av grønt (00 - FF) og dei to siste mengda av blått (00 - FF). Den neste noteringsmåten er eigentleg det same som metode 2, men denne gongen skrive som desimaltal (0 - 255). Merk at tala her er skilde med komma.

Ikkje alle nettlesarane oppfattar alle fargenamna, så dei to midtarste metodane er nok sikrast. Er du van med html-koding, vil den hexadesimale noteringa vere enklast. Denne er også mest brukt.

Bakgrunnsbilde i CSS

Ved hjelp av css kan du bruke bakgrunnsbilde på fleire måtar. Du kan bestemme kva for bilde som skal brukast og om det skal

Bildet kan bli henta frå den same mappa som nettsida ligg i, frå annan stad i filsystemet ditt eller frå Internett:

p {background-image : url(../bilde/lys.png);} /* Frå fil relativ til nettsida */
p {background-image : url(http://www.stuestoel.no/bilde/lys.png);} /*Frå nettet */

(Teksten som står mellom /* og */ er merknader til den menneskeleg lesaren av stilarket. Teksten høyrer ikkje med til stilarket, og blir ikkje lese av datamaskinen).

(Du bør vere litt forsiktig med å bruke bilde direkte frå Internett. Plutseleg ein dag er adressa borte, og du sit igjen med ein liten firkant som fortel at her skulle det vore eit bilde).

Gjenta

Til vanleg er det ikkje nødvendig å fortelje at bildet skal repeterast, men i noen tilfelle kan det vere nødvendig. Du skriv då

p.repeter { background-repeat : repeat; }
p.ikkje-repeter { background-repeat : no-repeat; }
p.repeter-vassrett { background-repeat : repeat-x; }
p.repeter-loddrett { background-repeat : repeat-y; }

Plassering

Eigenskapen background-position bestemmer kor på skjermen bakgrunnsbildet skal plasserast i høve til den html-taggen stilen er definert for. Er t.d. posisjonen set for <body>-taggen, blir bakgrunnen plassert i høve til heile skjermsida. Er posisjonen definert for ein <div>-tagg, blir bakgrunnen plassert i høve til (det oftast usynleg) omrisset av <div>-taggen.

Verdiane kan skrivast inn på fleire måtar. Ofte er det nok å bruke nøkkelorda left, center og right for plassering på linje (vassrett) og top, center og bottom for plassering på kolonne (loddrett). Nøkkelorda kan kombinerast med vanleg mellomrom mellom.

I eksempla nedanfor er dei brukte verdiane for background-position skrive i boksen:

Ønskjer eg bildet i øvre, venstre hjørne skriv eg background-position: top left

Det er også råd å bestemme plasseringa med koordinat. Som vanleg i dataverda er utgangspunktet øvre, venstre hjørne som har koordinaten (0,0). Koordinata blir skrivne med vanleg mellomrom mellom dei: background-position: 30px 50px

Alle måleeiningar kan brukast, men dei mest vanlege er pikslar (px), em og prosent (%). I dei fleste tilfella vil nok pikslar vere det mest fornuftige.

Fast eller rullande

Bakgrunnen kan vere fast plassert på skjermen, eller følgje med den vanlege rullinga (scrollinga). Dette blir bestemt med kommandoen

background-attachment : fixed dersom bildet skal stå fast på ein plass, eller
background-attachment : scroll dersom bildet skall følgje rullinga.

Graderte felt

Du har kanskje sett nettsider der bakgrunnen blir gradvis lysare eller mørkare. Slike er lett å lage med CSS. Vi treng eit passeleg bilde og noen få kommandoar.

Bildet du ser til venstre her set vi inn repeterande i den ramma vi vil ha det, og vips så er oppgåva løyst.

Sjølvsagt kan det same prinsippet brukast for å lage ein sidestolpe. La fargeovergangen skifte frå høgre til venstre og bruk background-repeat: repeat-y.

Menyen: