Bruke Bakgrunnsbilder på Elementer
background-image-egenskapen lar oss legge til et bilde som bakgrunn på et HTML-element. Den grunnleggende syntaksen er svært enkel:
background-image: url("image-url.jpg");
Som verdi for background-image-egenskapen bruker vi url(), og inne i disse parentesene spesifiserer vi bildeadressen.
index.html
index.css
background-repeat
Angir om bildet skal gjentas horisontalt, vertikalt, begge deler 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
background-size angir størrelsen på et elements bakgrunnsbilde. Det kan brukes til å skalere bildet slik at det passer til elementet, eller til å angi en spesifikk størrelse for bakgrunnsbildet.
background-size: auto | cover | contain | value in px/em/rem;
autobeholder bakgrunnsbildet i sin opprinnelige størrelse (standard);coverskalerer bildet slik at det dekker hele elementet, samtidig som bildeforholdet beholdes, noe som kan føre til at deler av bildet blir beskåret;containskalerer bildet slik at det passer helt innenfor elementet, samtidig som bildeforholdet beholdes, noe som kan føre til tomme områder;valueangir egendefinerte dimensjoner for bakgrunnsbildet, for eksempel100px 50pxeller prosenter som50%.
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
Awesome!
Completion rate improved to 2.56Bruke Bakgrunnsbilder på Elementer
Sveip for å vise menyen
background-image-egenskapen lar oss legge til et bilde som bakgrunn på et HTML-element. Den grunnleggende syntaksen er svært enkel:
background-image: url("image-url.jpg");
Som verdi for background-image-egenskapen bruker vi url(), og inne i disse parentesene spesifiserer vi bildeadressen.
index.html
index.css
background-repeat
Angir om bildet skal gjentas horisontalt, vertikalt, begge deler 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
background-size angir størrelsen på et elements bakgrunnsbilde. Det kan brukes til å skalere bildet slik at det passer til elementet, eller til å angi en spesifikk størrelse for bakgrunnsbildet.
background-size: auto | cover | contain | value in px/em/rem;
autobeholder bakgrunnsbildet i sin opprinnelige størrelse (standard);coverskalerer bildet slik at det dekker hele elementet, samtidig som bildeforholdet beholdes, noe som kan føre til at deler av bildet blir beskåret;containskalerer bildet slik at det passer helt innenfor elementet, samtidig som bildeforholdet beholdes, noe som kan føre til tomme områder;valueangir egendefinerte dimensjoner for bakgrunnsbildet, for eksempel100px 50pxeller prosenter som50%.
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!
