Bruke Bakgrunnsbilder på Elementer
background-image-egenskapen gjør det mulig å legge til et bilde som bakgrunn på et HTML-element. Grunnleggende syntaks er svært enkel:
background-image: url("image-url.jpg");
Som verdi for background-image-egenskapen brukes url(), og inne i disse parentesene angis bildeadressen.
index.html
index.css
background-repeat
Angir om bildet skal gjentas horisontalt, vertikalt, begge retninger eller ikke i det hele tatt.
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
index.html
index.css
background-position
background-position brukes til å angi startposisjonen for et bakgrunnsbilde innenfor et elements bakgrunnsområde. Denne egenskapen lar oss spesifisere hvor bakgrunnsbildet skal plasseres og hvordan det skal posisjoneres i forhold til elementet. Vi må angi posisjonen på x- og y-aksen
background-position: x y
index.html
index.css
background-size
Styrer hvordan bakgrunnsbildet skaleres:
background-size: auto | cover | contain | value in px/em/rem;
auto: original bildestørrelse;cover: fyller hele elementet, kan beskjæres;contain: tilpasser hele bildet, kan etterlate tomrom;value: egendefinert størrelse (f.eks.100px50px,50%).
index.html
index.css
1. Hva gjør egenskapen background-image?
2. Hva gjør egenskapen background-repeat?
3. Hvilken egenskap bestemmer posisjonen til et elements bakgrunnsbilde?
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
Can you show me an example of how to use all these background properties together?
What is the difference between `cover` and `contain` for background-size?
How do I center a background image both vertically and horizontally?
Fantastisk!
Completion rate forbedret til 2.56Bruke Bakgrunnsbilder på Elementer
Sveip for å vise menyen
background-image-egenskapen gjør det mulig å legge til et bilde som bakgrunn på et HTML-element. Grunnleggende syntaks er svært enkel:
background-image: url("image-url.jpg");
Som verdi for background-image-egenskapen brukes url(), og inne i disse parentesene angis bildeadressen.
index.html
index.css
background-repeat
Angir om bildet skal gjentas horisontalt, vertikalt, begge retninger eller ikke i det hele tatt.
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
index.html
index.css
background-position
background-position brukes til å angi startposisjonen for et bakgrunnsbilde innenfor et elements bakgrunnsområde. Denne egenskapen lar oss spesifisere hvor bakgrunnsbildet skal plasseres og hvordan det skal posisjoneres i forhold til elementet. Vi må angi posisjonen på x- og y-aksen
background-position: x y
index.html
index.css
background-size
Styrer hvordan bakgrunnsbildet skaleres:
background-size: auto | cover | contain | value in px/em/rem;
auto: original bildestørrelse;cover: fyller hele elementet, kan beskjæres;contain: tilpasser hele bildet, kan etterlate tomrom;value: egendefinert størrelse (f.eks.100px50px,50%).
index.html
index.css
1. Hva gjør egenskapen background-image?
2. Hva gjør egenskapen background-repeat?
3. Hvilken egenskap bestemmer posisjonen til et elements bakgrunnsbilde?
Takk for tilbakemeldingene dine!
