Anvendelse af Baggrundsbilleder på Elementer
background-image-egenskaben giver mulighed for at tilføje et billede som baggrund på et HTML-element. Den grundlæggende syntaks er meget enkel:
background-image: url("image-url.jpg");
Som værdi for background-image-egenskaben anvendes url(), og inde i disse parenteser angives billedets url.
index.html
index.css
background-repeat
Angiver om billedet gentages horisontalt, vertikalt, begge dele eller slet ikke.
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
index.html
index.css
background-position
background-position bruges til at angive startpositionen for et baggrundsbillede inden for et elements baggrundsområde. Denne egenskab gør det muligt at specificere, hvor baggrundsbilledet skal placeres, og hvordan det skal positioneres i forhold til elementet. Positionen skal angives på x- og y-aksen
background-position: x y
index.html
index.css
background-size
Styrer, hvordan baggrundsbilledet skaleres:
background-size: auto | cover | contain | value in px/em/rem;
auto: original billedstørrelse;cover: udfylder hele elementet, kan beskære billedet;contain: tilpasser hele billedet, kan efterlade tom plads;value: brugerdefineret størrelse (f.eks.100px50px,50%).
index.html
index.css
1. Hvad gør egenskaben background-image?
2. Hvad gør egenskaben background-repeat?
3. Hvilken egenskab bestemmer placeringen af et elements baggrundsbillede?
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
Fantastisk!
Completion rate forbedret til 2.56Anvendelse af Baggrundsbilleder på Elementer
Stryg for at vise menuen
background-image-egenskaben giver mulighed for at tilføje et billede som baggrund på et HTML-element. Den grundlæggende syntaks er meget enkel:
background-image: url("image-url.jpg");
Som værdi for background-image-egenskaben anvendes url(), og inde i disse parenteser angives billedets url.
index.html
index.css
background-repeat
Angiver om billedet gentages horisontalt, vertikalt, begge dele eller slet ikke.
background-repeat: repeat | repeat-x | repeat-y | no-repeat;
index.html
index.css
background-position
background-position bruges til at angive startpositionen for et baggrundsbillede inden for et elements baggrundsområde. Denne egenskab gør det muligt at specificere, hvor baggrundsbilledet skal placeres, og hvordan det skal positioneres i forhold til elementet. Positionen skal angives på x- og y-aksen
background-position: x y
index.html
index.css
background-size
Styrer, hvordan baggrundsbilledet skaleres:
background-size: auto | cover | contain | value in px/em/rem;
auto: original billedstørrelse;cover: udfylder hele elementet, kan beskære billedet;contain: tilpasser hele billedet, kan efterlade tom plads;value: brugerdefineret størrelse (f.eks.100px50px,50%).
index.html
index.css
1. Hvad gør egenskaben background-image?
2. Hvad gør egenskaben background-repeat?
3. Hvilken egenskab bestemmer placeringen af et elements baggrundsbillede?
Tak for dine kommentarer!
