HTML-Hajen

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.

<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-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ærdiEffekt
repeatDefaultværdien. Her gentages billedet både i bredden og højden
repeat_xHer gentages billedet kun horizontalt
repeat_yHer gentages billedet kun vertikalt
no-repeatHer vises billedet kun én gang
initialSætter værdien til defaultværdien
inheritHer 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ærdiEffekt
padding-boxDefaultværdien. Baggrundsbilledet starter i øverste venstre hjørne af padding-kanten.
border-boxBaggrundsbilledet starter i øverste venstre hjørne af kanten.
content-boxBaggrundsbilledet starter i øverste venstre hjørne af indholdet.
initialSætter værdien til defaultværdien
inheritHer 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.


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.


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.


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.




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ærdiEffekt
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 yposBaggrundsbilledets 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.
initialSætter værdien til defaultværdien
inheritHer 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.


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.


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ærdiEffekt
scrollBaggrunden scroller sammen med elementet. Dette er default.
fixedBaggrunden er fikseret i forhold til viewport, dvs. skærmbilledet.
localBaggrunden scroller sammen med elementets indhold.
initialSætter værdien til defaultværdien
inheritHer 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å.



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ærdiEffekt
autoBaggrundsbilledet bibeholder bredde og højde. Dette er default.
lengthSæ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.
percentageSæ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.
coverSkalerer 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.
containSkalering af billedet så det er størst muligt inden for elementets areal.
initialSætter værdien til defaultværdien
inheritHer 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ærdiEffekt
normalSætter blending mode til normal. Dette er default.
multiplySætter blending mode til multiply.
screenSætter blending mode til screen.
overlaySætter blending mode til overlay.
darkenSætter blending mode til darken.
lightenSætter blending mode til lighten
color-dodgeSætter blending mode til color-dodge
saturationSætter blending mode til saturation
colorSætter blending mode til color
luminositySæ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.