CSS - Bakgrunnsbilder
I CSS kan vi legge til grafikk og bilder som bakgrunn på ethvert element ved
hjelp av background-image. For å styre hvordan bildet skal
fylle elementet, bruker vi primært egenskapene background-repeat og background-size.
1. Legge til et bilde: background-image
Vi bruker funksjonen url() for å angi filbanen til bildet vi
vil bruke.
.banner {
background-image: url('bilder/bakgrunn.jpg');
}God praksis: Sett alltid en
background-color i tillegg! Hvis bildet bruker tid på å laste
eller filbanen er feil, vil bakgrunnsfargen sørge for at teksten over fortsatt
er leselig.2. Gjenta bildet: background-repeat
Som standard vil nettleseren "flislegge" (repetere) bakgrunnsbildet både
vannrett og loddrett for å fylle hele elementet. Med background-repeat bestemmer du om og hvordan bildet skal gjentas.
- no-repeat: Bildet vises kun én enkelt gang. (Dette er det mest vanlige for fotografier og bannere).
- repeat: Standardverdien. Bildet gjentas både horisontalt og vertikalt.
- repeat-x: Bildet gjentas kun horisontalt (vannrett).
- repeat-y: Bildet gjentas kun vertikalt (loddrett).
.banner {
background-repeat: no-repeat;
}3. Størrelse på bildet: background-size
Egenskapen background-size kontrollerer størrelsen på bakgrunnsbildet
inne i elementet.
- cover: Skalerer bildet slik at det dekker hele elementet. Bildet beholder proporsjonene sine, men deler av bildet kan bli beskåret dersom elementet har et annet sideforhold enn bildet. Svært populært for fullskjerm- og bannerbakgrunner.
- contain: Skalerer bildet
slik at hele bildet alltid er synlig inne i
elementet uten beskjæring. Kan føre til at deler av elementet
forblir tomt (hvis
no-repeater satt). - auto: Standardverdien. Bildet vises i sin originale, naturlige størrelse.
- Spesifikke mål (px eller %): F.eks.
100% autoeller200px 150pxfor å sette faste dimensjoner.
.hero {
background-size: cover;
}🗝️ Sentrale Begreper
- background-image: Angir bildekilden via
url(). - background-repeat: Bestemmer flislegging (
no-repeat,repeat,repeat-x,repeat-y). - background-size: Bestemmer bildets størrelse (
cover,contain,auto, eller piksler/prosent). - background-position: Plasserer bildet i beholderen
(f.eks.
centerellertop left). - cover vs. contain: cover fyller alt (kan beskjære deler av bildet); contain viser hele bildet (kan gi tomrom).