Anvendelse af Baggrundsbilleder på Elementer
background-image-egenskaben gør det muligt 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 vandret, lodret, 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
background-size angiver størrelsen på et elements baggrundsbillede. Det kan bruges til at skalere billedet, så det passer til elementet, eller til at angive en specifik størrelse for baggrundsbilledet.
background-size: auto | cover | contain | value in px/em/rem;
autobevarer baggrundsbilledets oprindelige størrelse (standard);coverskalerer billedet, så det dækker hele elementet, mens det bevarer billedets proportioner, hvilket kan medføre beskæring af billedet;containskalerer billedet, så det passer helt inden for elementet, mens det bevarer billedets proportioner, hvilket kan efterlade tomme områder;valueangiver brugerdefinerede dimensioner for baggrundsbilledet, såsom100px 50pxeller procenter som50%.
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
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?
Awesome!
Completion rate improved to 2.56Anvendelse af Baggrundsbilleder på Elementer
Stryg for at vise menuen
background-image-egenskaben gør det muligt 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 vandret, lodret, 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
background-size angiver størrelsen på et elements baggrundsbillede. Det kan bruges til at skalere billedet, så det passer til elementet, eller til at angive en specifik størrelse for baggrundsbilledet.
background-size: auto | cover | contain | value in px/em/rem;
autobevarer baggrundsbilledets oprindelige størrelse (standard);coverskalerer billedet, så det dækker hele elementet, mens det bevarer billedets proportioner, hvilket kan medføre beskæring af billedet;containskalerer billedet, så det passer helt inden for elementet, mens det bevarer billedets proportioner, hvilket kan efterlade tomme områder;valueangiver brugerdefinerede dimensioner for baggrundsbilledet, såsom100px 50pxeller procenter som50%.
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!
