How do I place an image in a selection in Photoshop?

Sådan bruger du billeder i CSS

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.

Indholds

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.

How do I add an image in CC?
The most straightforward way to add the image to a web page is through the HTML tag. However, CSS can be used to style the image, such as the adjusting its size, adding borders, and applying the effects like shadows.

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 er repeat (gentager både vandret og lodret). Andre værdier inkluderer no-repeat (viser billedet kun én gang), repeat-x (gentager kun vandret) og repeat-y (gentager kun lodret). For store baggrundsbilleder, der skal dække hele området, bruger man næsten altid no-repeat.
  • background-size: Denne er afgørende for at styre billedets størrelse i forhold til elementet. Værdien cover får billedet til at dække hele elementets område, beskærende hvis nødvendigt, mens billedets billedformat bevares. Værdien contain 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 er 0% 0% (øverst til venstre). Du kan bruge nøgleord som center, 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 som center 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 og height: Bestemmer billedets dimensioner. Det er ofte bedst at sætte enten bredde eller højde og lade den anden være auto for at bevare billedformatet. Procenter er nyttige for responsivitet.
  • max-width og max-height: Sætter en maksimal størrelse. Ofte bruges max-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 og padding: Skaber afstand omkring eller inden i billedet.
  • display: Billeder er som standard inline-block. At sætte display: 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åde width og height på et billede, men vil undgå forvrængning. Ligesom background-size har den værdier som cover (beskærer for at fylde dimensionerne) og contain (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.

Avatar photo

Franne Voigt

Mit navn er Franne Voigt, jeg er en 35-årig fotograf fra Danmark med en passion for at fange øjeblikke og dele mine erfaringer gennem min fotoblog. Jeg har arbejdet med både portræt- og naturfotografi i over et årti, og på bloggen giver jeg tips, teknikker og inspiration til både nye og erfarne fotografer. Fotografi er for mig en måde at fortælle historier på – én ramme ad gangen.

Go up

Når du klikker på , Accepter, accepterer du, at cookies gemmes på din enhed for at forbedre navigeringen på siden, analysere brugen af den og samarbejde med vores undersøgelser til markedsføring. Mere information