Du har et kort på nettsiden som trenger et bilde i toppen, men du vil ikke bruke et vanlig img-element. Kanskje bildet er dekorativt, eller du trenger mer kontroll over hvordan det vises. Med background-image i CSS kan du legge til bilder som bakgrunn i ethvert element. Kombinert med background-size, background-position og background-repeat får du full kontroll over hvordan bildet tilpasser seg boksen det plasseres i.
Background-image: sett inn et bilde med CSS
Egenskapen background-image bruker funksjonen url() til å peke på en bildefil. Inni parentesene skriver du filbanen til bildet. Banen er relativ til CSS-filen, ikke HTML-filen. Ligger CSS-filen i en mappe som heter css og bildet i en mappe som heter img på samme nivå, må du gå ett nivå opp med ../ før du navigerer inn i img-mappen. Denne stien er noe mange nybegynnere sliter med, men den følger samme logikk som filnavigasjon ellers.
Når bildet er lagt til, vises det i sin originale størrelse. Hvis elementet er mindre enn bildet, ser du bare en del av det. Er elementet større, kan bildet repeteres. Derfor trenger du flere egenskaper for å styre resultatet.
Background-size: tilpass bildet til boksen
Egenskapen background-size bestemmer hvordan bildet skaleres i forhold til elementet. De to viktigste verdiene er cover og contain. Cover skalerer bildet slik at det fyller all tilgjengelig plass i elementet. Hvis bildets proporsjoner ikke matcher boksen, beskjæres kantene. Contain skalerer bildet slik at hele bildet er synlig, men det kan oppstå tomme områder langs sidene der bakgrunnsfargen vises gjennom.
Cover er den verdien du vil bruke oftest. Den sørger for at det aldri er tomme felter rundt bildet, og resultatet ser profesjonelt ut uansett hvilket format boksen har. I videoleksjonen vises det tydelig: uten cover ser du bare et lite hjørne av bildet, men med cover fyller bildet hele kortheaderen og ser umiddelbart bra ut.
Background-position: velg hva som vises
Når cover beskjærer bildet, bestemmer background-position hvilken del av bildet som er synlig. Verdien center viser midten av bildet, noe som fungerer godt for de fleste bilder. Du har også nøkkelord som top, bottom, left og right for å fokusere på en bestemt kant. For enda mer presis kontroll kan du bruke prosentverdier eller pikselverdier.
For portrettbilder er center et trygt valg fordi ansiktet gjerne er i midten. For landskapsbilder kan du bruke top for å vise himmelen eller bottom for å fremheve forgrunnen. Prøv deg frem med nettleserens utviklerverktøy for å se resultatet umiddelbart.
Background-repeat: unngå repeterende bilder
Som standard repeterer nettleseren bakgrunnsbildet i begge retninger for å fylle elementet. Det gir mening for små mønsterbilder, men for fotografier vil du nesten alltid sette background-repeat til no-repeat. Da vises bildet bare en gang. Har du et dekorativt mønster som skal repeteres vannrett, kan du bruke repeat-x. For vertikal repetisjon finnes repeat-y.
Background-image eller img-element?
Et vanlig spørsmål er når du bør bruke background-image i CSS kontra et img-element i HTML. Tommelregelen er: bilder som er en del av innholdet, slik som produktbilder og profilbilder, hører hjemme i HTML med img. Bilder som er dekorative, slik som bakgrunnsbilder på kort, seksjoner og heltebilder, passer bedre som background-image. Dekorative bilder trenger ikke alt-tekst, og med CSS får du bedre kontroll over posisjonering og skalering uten ekstra HTML-elementer.
Shorthand med background-egenskapen
I stedet for å skrive fire separate egenskaper kan du bruke shorthand-egenskapen background. Den lar deg kombinere farge, bilde, posisjon, repetisjon og størrelse i en og samme linje. Men shorthand kan bli uoversiktlig når du bruker mange verdier. For nybegynnere er det enklere å skrive hver egenskap separat, slik at du ser nøyaktig hva hver linje gjør. Når du har mer erfaring, kan du vurdere shorthand for å redusere antall linjer. Mer om syntaksen finner du i MDN sin dokumentasjon om background-image.
Lær mer om background-image med video
Denne artikkelen bygger på en videoleksjon fra CSS-kurset på Utdannet.no. I videoen får du se hvordan du:
- Legger til et bilde i et kortelement med background-image og url()
- Bruker background-size: cover sammen med background-position: center for et profesjonelt resultat
- Setter background-repeat til no-repeat for å unngå at bildet gjentas
