Baggrunde; billeder og effekter
Baggrunde
På elementer som tabeller og sektioner med tekst, eller for den sags skyld BODY tag'en, hvor man et indhold der gør det muligt at se baggrunden, kan man styre hvad man vil vise, og hvordan. Der er til visning af baggrundsbilleder et væld af muligheder for både placering af billederne og hvordan de bevæger sig i forhold til siden, når man scroller (f.eks. det man kalder parallax-effekt), som kan give siden lidt liv og personlighed.
Billeder
Simple billeder i baggrunden, klares med stylen background-image: url() f.eks.
hvilket kommer til at se således ud:
Som det ses, fylder background-image som default baggrunden op med billedet, ved at gentage det. Det kan man ændre. Man kan også have flere billeder, lagt i lag. I så fald adskiller man stien til billederne med komma. Her skal man lige være opmærksom på, at Internet Explorer 8 og tidligere ikke understøtter dette. Men hvis vi prøver to billeder:
hvilket kommer til at se således ud:
Som det ses, er det heller ikke noget problem med animationer som baggrund.
Hvis man vil have noget andet, end billedet der gentages på hele den synlige flade, man man også styre dette. Til sin rådighed har man flg. parametre:
background-repeat
background-repeat den variabel, hvor man specificerer on baggrundsbilleder skal vises en eller flere gang, og hvordan. Til background-repeat har man flg. værdier:
Der kommer eksempler på repeat længere nede, i forbindelse med andre parametre.
background-origin
background-origin er en af de to muligheder for at specificerer placeringen af baggrundsbilledet. background-origin er mest relevant i forhold til elementets kanter, har man brug for en placering i forhold til hele elementets flade, er det background-position man skal bruge. Til background-origin har man flg. værdier:
Det kan være meget svært at se forskel på især padding-box og border-box, men er her der et eksempel på hver, hvor kanten er lavet stiplet og 10px bred, så man bedre kan se forskellen:
Med STYLE="background-origin:padding-box"
Med STYLE="background-origin:border-box"
Med STYLE="background-origin:content-box"
Det bør også nævnes, at så snart man har background med repeat af en eller anden art, så er det placeringen af første HELE baggrundsbillede, så f.eks. content-box fyldes ud til venstre for det hele billede med et delvis billede, i stedet for at man har en fri kan hele vejen rundt, f.eks. med background-repeat:repeat-x:
background-position
Vil man have sit baggrundsbillede placeret et specifikt sted på elementets baggrund, bruger man background-position. At bruge background-position giver mest mening hvis man kun viser billedet én gang, eller i én række/søjle. Til background-position er der flg. variabler:
Så, hvis vi fra vores eksempel fra før, vil have baggrundsbilledet placeret i øverste højre hjørne, så det ikke kommer i vejen for indholdet, bruger vi background-position:right top:
Hvis man har flere billeder, tillader background-position også flere billedplaceringer. I så fald adskilles disse med komma. Her er der to billeder placeret ved background-position:right top, center top:
Hvis der ikke er specificeret billeder til de specificerede positioner, vises der ikke et billede, så man kan ikke vise det samme billede på to positioner, ved kun at specificere det ene billede én gang. Det skal skrives to gange, adskilt med komma, som med to forskellige billeder.
background-attachment
background-attachment specificerer hvordan baggrundsbilledet er fikseret, dvs. følger med ved scroll eller ej, og hvis det gør, hvilken del af siden er det så der bliver fulgt. Til background-attachment har man flg. værdier:
Scroll er det der er vist på de andre baggrunde, så det er der ingen grund til at gentage.
Hvis vi starter med fixed, så skal den bruges med lidt omtanke. Hvor scroll og local fikserer baggrundsbilledet i forhold til elementet, placerer fixed i forhold til viewport, dvs. den åbne tab. Det betyder, at f.eks. background-position: left center ikke længere er ved elementets venstremargin men helt ude ved tab'ens venstremargin. Hvis vi prøver at se på Dannebrog placeret med background-attachment:fixed og background-position:center center kommer det til at se således ud:
Dannebrog på fixed background-attachment.
Dette kaldes også for parallax scrolling.
Hvis man bruger background-attachment:local fikseres baggrunden i forhold til elementet. Hvis vi ser på en DIV hvor indholdet, i dette tilfælde Der er et yndigt land, fylder mere end baggrundsbilledet og størrelsen på elementet. Når man scroller følger baggrundsbilledet med teksten, hvor baggrundsbilledet ved background-attachment:scroll ville blive hvor det var, og teksten alene ville scrolle. Effekten af background-attachment:local ser således ud:
background-size
background-size skalerer baggrundsbilledet, som navnet antyder, helt analogt til skalering af billeder med IMG-tag'en. Til background-size har man flg. værdier:
background-blend-mode
background-blend-mode er en relativt ny feature, som giver mulighed for at blande baggrundsfarve og baggrundsbillede. Man kan lave nogle ret interessante effekter med background-blend-mode, men da den bl.a. ikke understøttes af Internet Explorer og Edge, er det ikke en effekt man bør tage i anvendelse, før Internet Explorer er blevet udfaset, og Edge understøtter funktionen.
Værdierne som background-blend-mode kan antage er:
Når teknologien er så fremskreden at alle moderne browsere understøtter den, bliver den gennemgået i detaljer. Indtil da, er det kun nødvendigt at vide hvad det går ud på, og hvorfor man ikke skal bruge den.
<DIV STYLE="background-image:url(../Graphics/Humphrey_Thumb.png)"> </DIV>
hvilket kommer til at se således ud:
Som det ses, fylder background-image som default baggrunden op med billedet, ved at gentage det. Det kan man ændre. Man kan også have flere billeder, lagt i lag. I så fald adskiller man stien til billederne med komma. Her skal man lige være opmærksom på, at Internet Explorer 8 og tidligere ikke understøtter dette. Men hvis vi prøver to billeder:
<DIV STYLE="background-image:url(../Graphics/Humphrey_Thumb.png),url(../Graphics/ComputerWork.gif)"> </DIV>
hvilket kommer til at se således ud:
Som det ses, er det heller ikke noget problem med animationer som baggrund.
Hvis man vil have noget andet, end billedet der gentages på hele den synlige flade, man man også styre dette. Til sin rådighed har man flg. parametre:
- background-repeat
- background-origin
- background-position
- background-size
background-repeat
background-repeat den variabel, hvor man specificerer on baggrundsbilleder skal vises en eller flere gang, og hvordan. Til background-repeat har man flg. værdier:
| Værdi | Effekt |
| repeat | Defaultværdien. Her gentages billedet både i bredden og højden |
| repeat_x | Her gentages billedet kun horizontalt |
| repeat_y | Her gentages billedet kun vertikalt |
| no-repeat | Her vises billedet kun én gang |
| initial | Sætter værdien til defaultværdien |
| inherit | Her nedarves værdien fra forældreelementet |
Der kommer eksempler på repeat længere nede, i forbindelse med andre parametre.
background-origin
background-origin er en af de to muligheder for at specificerer placeringen af baggrundsbilledet. background-origin er mest relevant i forhold til elementets kanter, har man brug for en placering i forhold til hele elementets flade, er det background-position man skal bruge. Til background-origin har man flg. værdier:
| Værdi | Effekt |
| padding-box | Defaultværdien. Baggrundsbilledet starter i øverste venstre hjørne af padding-kanten. |
| border-box | Baggrundsbilledet starter i øverste venstre hjørne af kanten. |
| content-box | Baggrundsbilledet starter i øverste venstre hjørne af indholdet. |
| initial | Sætter værdien til defaultværdien |
| inherit | Her nedarves værdien fra forældreelementet |
Det kan være meget svært at se forskel på især padding-box og border-box, men er her der et eksempel på hver, hvor kanten er lavet stiplet og 10px bred, så man bedre kan se forskellen:
Med STYLE="background-origin:padding-box"
Vær ikke snobbet.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Med STYLE="background-origin:border-box"
Vær ikke snobbet.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Med STYLE="background-origin:content-box"
Vær ikke snobbet.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Det bør også nævnes, at så snart man har background med repeat af en eller anden art, så er det placeringen af første HELE baggrundsbillede, så f.eks. content-box fyldes ud til venstre for det hele billede med et delvis billede, i stedet for at man har en fri kan hele vejen rundt, f.eks. med background-repeat:repeat-x:
Vær ikke snobbet.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
background-position
Vil man have sit baggrundsbillede placeret et specifikt sted på elementets baggrund, bruger man background-position. At bruge background-position giver mest mening hvis man kun viser billedet én gang, eller i én række/søjle. Til background-position er der flg. variabler:
| Værdi | Effekt |
| left top left center left bottom right top right center right bottom center top center center center bottom | Relativ placering i forhold til elementets flade. Hvis man kun specificerer den ene halvdel af værdien, sættes den anden automatisk til 'center'. |
| x% y% | Baggrundsbilledets afstand fra øverste venstre hjørne i procent. Specificerer man kun ét tal, betragtes dette som x% og y% bliver sat til 50%. |
| xpos ypos | Baggrundsbilledets afstand fra øverste venstre hjørne i fast afstand, f.eks. px eller cm. Specificerer man kun ét tal, betragtes dette som xpos og ypos bliver sat til 50%. Man kan med denne variabel kombinere absolutte og relative afstande, f.eks. px og procenter. |
| initial | Sætter værdien til defaultværdien |
| inherit | Her nedarves værdien fra forældreelementet |
Så, hvis vi fra vores eksempel fra før, vil have baggrundsbilledet placeret i øverste højre hjørne, så det ikke kommer i vejen for indholdet, bruger vi background-position:right top:
Vær ikke snobbet.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Hvis man har flere billeder, tillader background-position også flere billedplaceringer. I så fald adskilles disse med komma. Her er der to billeder placeret ved background-position:right top, center top:
Vær ikke snobbet.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Vær ikke vigtig.
Vær ikke underdanig.
Vær fordringsfuld overfor Dem selv men ikke overfor Andre.
Det har været mig så magtpåliggende at få nedskrevet disse grundlæggende Råd for vor Omgangstone, at de er faldet mig i Pennen, før jeg tog fat det, hvor jeg rettelig skulde begynde, nemlig med at sige, at al virkelig god Opførsel kommer indefra, udspringer naturligt fra det Sind, som er åbent for Velvilje, Forståelse og Medynk med Andre.
Hvis der ikke er specificeret billeder til de specificerede positioner, vises der ikke et billede, så man kan ikke vise det samme billede på to positioner, ved kun at specificere det ene billede én gang. Det skal skrives to gange, adskilt med komma, som med to forskellige billeder.
background-attachment
background-attachment specificerer hvordan baggrundsbilledet er fikseret, dvs. følger med ved scroll eller ej, og hvis det gør, hvilken del af siden er det så der bliver fulgt. Til background-attachment har man flg. værdier:
| Værdi | Effekt |
| scroll | Baggrunden scroller sammen med elementet. Dette er default. |
| fixed | Baggrunden er fikseret i forhold til viewport, dvs. skærmbilledet. |
| local | Baggrunden scroller sammen med elementets indhold. |
| initial | Sætter værdien til defaultværdien |
| inherit | Her nedarves værdien fra forældreelementet |
Scroll er det der er vist på de andre baggrunde, så det er der ingen grund til at gentage.
Hvis vi starter med fixed, så skal den bruges med lidt omtanke. Hvor scroll og local fikserer baggrundsbilledet i forhold til elementet, placerer fixed i forhold til viewport, dvs. den åbne tab. Det betyder, at f.eks. background-position: left center ikke længere er ved elementets venstremargin men helt ude ved tab'ens venstremargin. Hvis vi prøver at se på Dannebrog placeret med background-attachment:fixed og background-position:center center kommer det til at se således ud:
Dannebrog på fixed background-attachment.
Dette kaldes også for parallax scrolling.
Hvis man bruger background-attachment:local fikseres baggrunden i forhold til elementet. Hvis vi ser på en DIV hvor indholdet, i dette tilfælde Der er et yndigt land, fylder mere end baggrundsbilledet og størrelsen på elementet. Når man scroller følger baggrundsbilledet med teksten, hvor baggrundsbilledet ved background-attachment:scroll ville blive hvor det var, og teksten alene ville scrolle. Effekten af background-attachment:local ser således ud:
Der er et yndigt land,
det står med brede bøge
nær salten østerstrand
nær salten østerstrand.
Det bugter sig i bakke, dal,
det hedder gamle Danmark,
og det er Frejas sal,
og det er Frejas sal.
Der sad i fordums tid
de harniskklædte kæmper,
udhvilede fra strid
udhvilede fra strid.
Så drog de frem til fjenders mén,
nu hvile deres bene
bag højens bautasten,
bag højens bautasten.
Det land endnu er skønt,
thi blå sig søen bælter,
og løvet står så grønt
og løvet står så grønt.
Og ædle kvinder, skønne mø'r
og mænd og raske svende
bebo de danskes øer,
bebo de danskes øer.
Hil drot og fædreland!
Hil hver en danneborger,
som virker, hvad han kan
som virker, hvad han kan!
Vort gamle Danmark skal bestå,
så længe bøgen spejler
sin top i bølgen blå,
sin top i bølgen blå.
Vort gamle Danmark skal bestå,
så længe bøgen spejler
sin top i bølgen blå,
sin top i bølgen blå.
det står med brede bøge
nær salten østerstrand
nær salten østerstrand.
Det bugter sig i bakke, dal,
det hedder gamle Danmark,
og det er Frejas sal,
og det er Frejas sal.
Der sad i fordums tid
de harniskklædte kæmper,
udhvilede fra strid
udhvilede fra strid.
Så drog de frem til fjenders mén,
nu hvile deres bene
bag højens bautasten,
bag højens bautasten.
Det land endnu er skønt,
thi blå sig søen bælter,
og løvet står så grønt
og løvet står så grønt.
Og ædle kvinder, skønne mø'r
og mænd og raske svende
bebo de danskes øer,
bebo de danskes øer.
Hil drot og fædreland!
Hil hver en danneborger,
som virker, hvad han kan
som virker, hvad han kan!
Vort gamle Danmark skal bestå,
så længe bøgen spejler
sin top i bølgen blå,
sin top i bølgen blå.
Vort gamle Danmark skal bestå,
så længe bøgen spejler
sin top i bølgen blå,
sin top i bølgen blå.
background-size
background-size skalerer baggrundsbilledet, som navnet antyder, helt analogt til skalering af billeder med IMG-tag'en. Til background-size har man flg. værdier:
| Værdi | Effekt |
| auto | Baggrundsbilledet bibeholder bredde og højde. Dette er default. |
| length | Sætter bredde og højde på baggrundsbilledet i absolutte værdier (px, cm, etc.). Første værdi er bredden, anden værdi er højden. Hvis der kun angives én værdi, skaleres højden proportinelt. |
| percentage | Sætter bredde og højde på baggrundsbilledet i procenter af originalstørrelsen. Første værdi er bredden, anden værdi er højden. Hvis der kun angives én værdi, bruges denne for både bredde og højde. |
| cover | Skalerer baggrundsbilledet, så det bliver så stort som muligt og dækker hele baggrunden. Billedets proportioner bibeholdes, så dele af billedet kan være uden for den synlige del af elementet. |
| contain | Skalering af billedet så det er størst muligt inden for elementets areal. |
| initial | Sætter værdien til defaultværdien |
| inherit | Her nedarves værdien fra forældreelementet |
background-blend-mode
background-blend-mode er en relativt ny feature, som giver mulighed for at blande baggrundsfarve og baggrundsbillede. Man kan lave nogle ret interessante effekter med background-blend-mode, men da den bl.a. ikke understøttes af Internet Explorer og Edge, er det ikke en effekt man bør tage i anvendelse, før Internet Explorer er blevet udfaset, og Edge understøtter funktionen.
Værdierne som background-blend-mode kan antage er:
| Værdi | Effekt |
| normal | Sætter blending mode til normal. Dette er default. |
| multiply | Sætter blending mode til multiply. |
| screen | Sætter blending mode til screen. |
| overlay | Sætter blending mode til overlay. |
| darken | Sætter blending mode til darken. |
| lighten | Sætter blending mode til lighten |
| color-dodge | Sætter blending mode til color-dodge |
| saturation | Sætter blending mode til saturation |
| color | Sætter blending mode til color |
| luminosity | Sætter blending mode til luminosity |
Når teknologien er så fremskreden at alle moderne browsere understøtter den, bliver den gennemgået i detaljer. Indtil da, er det kun nødvendigt at vide hvad det går ud på, og hvorfor man ikke skal bruge den.
Transparens/opacitet
Man kan ikke lægge transparens/opacitet specifikt på baggrundsbilleder. Hvis man bruger den style der hedder opacity, vil den ligge på hele elementet med baggrundsbilledet, dvs. tekst og andet indhold vil også blive transparent. Der er dog en workaround til dette, idet man kan anvende filformater som tillader transparens, f.eks. png-formatet, og bruge et transparent billede som baggrund.