Billeder er en uundværlig del af moderne webdesign. De fanger opmærksomheden, formidler information og skaber den visuelle appel, der gør en hjemmeside levende og engagerende. Mens HTML giver os mulighed for at placere billeder på en side, er det CSS, der giver os den sande kontrol over, hvordan disse billeder præsenteres. Med CSS kan vi styre størrelse, placering, udseende og endda hvordan billeder opfører sig i forhold til andre elementer og forskellige skærmstørrelser. At mestre CSS-baseret billedhåndtering er afgørende for enhver webudvikler eller designer, der ønsker at skabe smukke og funktionelle hjemmesider. Der findes primært tre måder at arbejde med billeder på ved hjælp af CSS, hver med sine egne fordele og typiske anvendelser.
Baggrundsbilleder med CSS
Den første og meget almindelige metode er at bruge billeder som baggrund for et HTML-element. Dette er ideelt til dekorative billeder, store overflader, eller når billedet ikke er en central del af indholdet, men snarere tjener et designmæssigt formål. Forestil dig et stort hero-billede øverst på siden, en tekstur i baggrunden af en sektion, eller et lille ikon i baggrunden af en knap. Disse er typiske scenarier, hvor background-image
-egenskaben kommer i spil. Baggrundsbilleder påvirker ikke sidens layout på samme måde som et almindeligt indholdsbillede, hvilket gør dem fleksible til designformål.

Sådan tilføjes et baggrundsbillede
Du tilføjer et baggrundsbillede til et element ved hjælp af background-image
-egenskaben i CSS. Værdien er typisk url()
, hvor stien til billedfilen angives inden i parenteserne.
.mit-element { background-image: url('sti/til/billede.jpg'); }
Dette alene indsætter billedet, men sjældent på den ønskede måde. Standardadfærd er at gentage billedet for at fylde elementets baggrundsområde, og billedet starter øverst til venstre. For at få kontrol over dette, bruger vi yderligere background-
egenskaber.
Styring af baggrundsbilledets udseende
Når baggrundsbilledet er indsat, har du en række kraftfulde CSS-egenskaber til at justere, hvordan det vises:
background-repeat
: Denne egenskab styrer, om og hvordan billedet gentages. Standardværdien errepeat
(gentager både vandret og lodret). Andre værdier inkludererno-repeat
(viser billedet kun én gang),repeat-x
(gentager kun vandret) ogrepeat-y
(gentager kun lodret). For store baggrundsbilleder, der skal dække hele området, bruger man næsten altidno-repeat
.background-size
: Denne er afgørende for at styre billedets størrelse i forhold til elementet. Værdiencover
får billedet til at dække hele elementets område, beskærende hvis nødvendigt, mens billedets billedformat bevares. Værdiencontain
sikrer, at hele billedet er synligt inden for elementet, skaleres ned hvis nødvendigt, også mens billedformatet bevares (kan efterlade tomme områder). Du kan også angive størrelsen med længdeenheder (f.eks.300px
) eller procenter (f.eks.100% auto
for at fylde bredden).background-position
: Denne egenskab bestemmer billedets startposition inden i elementet. Standard er0% 0%
(øverst til venstre). Du kan bruge nøgleord somcenter
,top
,bottom
,left
,right
eller kombinationer deraf (f.eks.center center
for at centrere). Du kan også bruge procenter eller længdeenheder (f.eks.50% 50%
er det samme somcenter center
).background-attachment
: Denne egenskab styrer, om baggrundsbilledet ruller med sidens indhold (standard:scroll
) eller forbliver fikseret i viewporten (fixed
).fixed
-værdien kan skabe interessante parallakse-effekter.
Ofte kombineres disse egenskaber for at opnå det ønskede resultat, især background-image
, background-size
, background-repeat
og background-position
. For eksempel, for et stort baggrundsbillede der dækker hele elementet og er centreret, ville man typisk skrive:
.mit-hero { background-image: url('sti/til/hero.jpg'); background-size: cover; /* Dækker hele området */ background-repeat: no-repeat; /* Vis kun én gang */ background-position: center; /* Centrer billedet */ }
Baggrundsbilleder er meget fleksible til designformål, men det er vigtigt at huske, at de ikke er en del af sidens indhold i semantisk forstand og ikke er tilgængelige for skærmlæsere via alt
-tekst.
Billeder som Indholdselementer (-tagget)
Den mest traditionelle og semantisk korrekte måde at indsætte et billede på er ved hjælp af HTML's <img>
-tag. Dette bruges, når billedet er en essentiel del af sidens indhold, f.eks. et produktbillede i en webshop, et portrætbillede i en biografi, et diagram, der illustrerer et punkt, eller et logo, der repræsenterer brandet. Her er billedet en del af dokumentets flow og kan påvirke layoutet omkring det.
Styling af -tagget med CSS
Selvom billedet indsættes med HTML, er det CSS, der giver os den fulde kontrol over dets visuelle præsentation. Vi kan bruge CSS til at ændre størrelse, tilføje rammer, skygger og meget mere.
img { max-width: 100%; /* Gør billedet responsivt */ height: auto; /* Bevarer billedformatet */ }
Ovenstående er et fundamentalt stykke CSS for at gøre billeder responsive, så de aldrig overskrider bredden på deres container. Her er nogle almindelige CSS-egenskaber, der bruges til at style <img>
-tagget:
width
ogheight
: Bestemmer billedets dimensioner. Det er ofte bedst at sætte enten bredde eller højde og lade den anden væreauto
for at bevare billedformatet. Procenter er nyttige for responsivitet.max-width
ogmax-height
: Sætter en maksimal størrelse. Ofte brugesmax-width: 100%;
for at sikre, at billedet skalerer ned på mindre skærme.border
: Tilføjer en ramme omkring billedet.border-radius
: Afrunder billedets hjørner, hvilket kan give et blødere look.box-shadow
: Tilføjer en skyggeeffekt, der kan få billedet til at poppe ud fra baggrunden.margin
ogpadding
: Skaber afstand omkring eller inden i billedet.display
: Billeder er som standardinline-block
. At sættedisplay: block;
kan give mere kontrol over margen og forhindre små mellemrum under billedet.object-fit
: Denne egenskab er meget nyttig, når du sætter bådewidth
ogheight
på et billede, men vil undgå forvrængning. Ligesombackground-size
har den værdier somcover
(beskærer for at fylde dimensionerne) ogcontain
(skalerer for at passe inden for dimensionerne uden beskæring), der bevarer billedformatet.
Fordelen ved at bruge <img>
-tagget er dets semantiske værdi og understøttelse af alt
-attributten, som er essentiel for tilgængelighed (accessibility) og SEO. Hvis billedet ikke kan indlæses, eller for brugere af skærmlæsere, giver alt
-teksten en beskrivelse af billedets indhold.
Billeder med content Egenskaben og Pseudo-elementer
En mindre almindelig, men smart, metode til at indsætte små billeder er ved hjælp af CSS's content
-egenskab i kombination med pseudo-elementerne ::before
eller ::after
. Dette bruges typisk til dekorative ikoner eller små grafikker, der er relateret til et specifikt tekstelement, men som ikke er en del af selve teksten.
Anvendelse med ::before og ::after
Pseudo-elementer som ::before
og ::after
indsætter indhold lige før eller lige efter indholdet af et valgt element. Med content
-egenskaben kan du indsætte tekst, en streng, eller et billede ved hjælp af url()
.
.mit-liste-punkt::before { content: url('sti/til/ikon.png'); display: inline-block; /* Gør det muligt at sætte margin/størrelse */ margin-right: 10px; width: 20px; /* Juster størrelse */ height: auto; }
I dette eksempel indsættes et ikon før teksten i et listepunkt. Det er vigtigt at sætte display
-egenskaben til f.eks. inline-block
eller block
, da pseudo-elementer som standard er inline
og kan være svære at style med hensyn til dimensioner og margen. Du kan derefter justere størrelse, margen og andre visuelle egenskaber som med andre elementer.
Denne metode er god til at holde din HTML ren for små dekorative elementer. Dog er billeder indsat på denne måde rent dekorative og har ingen semantisk værdi eller tilgængelighed via alt
-tekst, da de ikke er rigtige <img>
-elementer. De er bedst egnet til elementer, hvis betydning ikke afhænger af billedet.
Sammenligning af Metoderne
For at opsummere de tre metoder og hjælpe dig med at vælge den rette til din specifikke opgave, kan vi se på deres primære forskelle:
Egenskab | Baggrundsbilleder | <img> -tagget |
content med Pseudo-elementer |
---|---|---|---|
Formål | Dekoration, store flader | Essentielt indhold, semantisk vigtigt | Små dekorative ikoner/grafikker |
HTML-element | Anvendes på ethvert element (div , body , section osv.) |
Kræver et <img> -tag i HTML |
Anvendes på ethvert element med ::before eller ::after |
Primære CSS-egenskaber | background-image , background-size , background-position , background-repeat , background-attachment |
width , height , max-width , border , border-radius , box-shadow , margin , padding , display , object-fit |
content , display , width , height , margin , padding |
Semantik / Tilgængelighed | Ingen semantisk værdi, ikke tilgængelig via alt |
Semantisk korrekt, understøtter alt -tekst |
Ingen semantisk værdi, ikke tilgængelig via alt |
Påvirkning af Layout | Påvirker ikke indholdets flow | Er en del af indholdets flow | Er en del af indholdets flow (inline/block) |
Typiske Anvendelser | Baggrunde, hero-sektioner, teksturer | Produktbilleder, portrætter, diagrammer, logoer | Listeikoner, små indikatorer, dekorative accenter |
Ofte Stillede Spørgsmål om Billeder i CSS
Hvornår skal jeg bruge background-image vs <img>?
Vælg <img>
, når billedet er en del af sidens indhold og bærer mening (f.eks. et produktfoto). Vælg background-image
, når billedet er rent dekorativt og ikke essentielt for at forstå sidens indhold (f.eks. en baggrundstekstur eller et stort hero-billede uden tekst, der skal læses).
Kan jeg gøre baggrundsbilleder responsive?
Ja, absolut! Ved at bruge CSS-egenskaber som background-size: cover;
eller background-size: contain;
samt enheder som procenter for background-position
, kan baggrundsbilleder skalere og tilpasse sig forskellige skærmstørrelser. Media queries kan også bruges til at ændre baggrundsbilledet eller dets egenskaber helt på forskellige breakpoints.
Hvordan centrerer jeg et billede med CSS?
For et <img>
-tag, der er sat til display: block;
, kan du centrere det ved at sætte vandrette margener til auto
: margin: 0 auto;
. For et baggrundsbillede bruger du background-position: center center;
.
Hvad er forskellen på background-size: cover og contain?
cover
skalerer baggrundsbilledet, så det dækker hele elementets område, selvom det betyder, at dele af billedet beskæres. Billedets billedformat bevares. contain
skalerer billedet, så det passer *inden for* elementets område, uden beskæring. Dette kan efterlade tomme områder i elementet, hvis billedets billedformat ikke matcher elementets. Også her bevares billedets billedformat.
Er billeder tilføjet med content tilgængelige?
Nej, billeder indsat via content
-egenskaben på pseudo-elementer er ikke tilgængelige for skærmlæsere og har ingen alt
-tekst. De bør kun bruges til rent dekorative formål, hvor billedet ikke er nødvendigt for at forstå indholdet.
Konklusion
CSS giver en utrolig kontrol over, hvordan billeder præsenteres på en hjemmeside. Uanset om du har brug for et stort, dekorativt baggrundsbillede, et essentielt indholdsbillede med fuld tilgængelighed, eller et lille ikon ved siden af tekst, findes der en CSS-baseret løsning. Ved at forstå forskellene mellem at bruge background-image
, at style et <img>
-tag og at indsætte billeder med content
-egenskaben på pseudo-elementer, kan du vælge den mest passende metode til enhver situation. At mestre disse teknikker er nøglen til at skabe visuelt tiltalende, responsive og semantisk korrekte weboplevelser. Eksperimentér med de forskellige egenskaber – background-size
, object-fit
, border-radius
og mange flere – for at give dine billeder det helt rigtige look og følelse på din hjemmeside.
Hvis du vil læse andre artikler, der ligner Sådan bruger du billeder i CSS, kan du besøge kategorien Fotografi.