For å sette et bilde bak elementet, “bakgrunnsbilde”Eiendom til CSS spiller inn. Som standard vises det på øverste venstre hjørne av skjermen og gjentas horisontalt og vertikalt. Du kan også legge til mer enn ett bilde i bakgrunnen til HTML -elementet; Angi dessuten bredden og høyden på bildet i henhold til dine preferanser. Du kan imidlertid også stoppe repetisjonen av bildet.

Denne oppskrivningen vil gi følgende læringsresultater:

• • Bakgrunnsbilde eiendom
  • Hvordan sette et bakgrunnsbilde

“Bakgrunnsbilde” CSS-eiendom

“bakgrunnsbilde”Eiendom brukes til å bruke et bilde på bakgrunn av en spesifisert tag.

Syntaks

Her er syntaksen for å sette et bakgrunnsbilde til et HTML -element:

Bakgrunnsbilde: bilde url ();

Her har Image URL () bildenavnet eller bildemappen som den eksisterer.

La oss prøve et eksempel for å ha en bedre forståelse.

Eksempel: Hvordan sette et bakgrunnsbilde ved hjelp av CSS?

I dette eksemplet vil vi først lage to elementer til (

og

tags), bak som bakgrunnsbildet vil bli lagt til. Du kan legge til elementer i henhold til ditt valg og bruke bakgrunnsbildeegenskaper på det:

Angi bakgrunnsbilde

For å angi bakgrunnsbildet, bruk CSS bakgrunnsbildeegenskap

Du kan legge til elementer i henhold til ditt valg og bruke bakgrunnsbildeegenskaper på den.

Flytt til CSS og tilordne navnet på bildet i “bakgrunnsbilde”URL:

kropp
Bakgrunnsbilde: URL ("IMG.jpg ");

Når du har fullført alle trinnene, utfør HTML -filen, får du følgende utfall:

Her kan du se at bakgrunnsbildet blir gjentatt. For å unngå dette, bruk "Bakgrunnsrepetitt”Eiendom og setter verdien til“Ingen repeter”:

kropp
Bakgrunnsbilde: URL ("IMG.jpg ");
Bakgrunnsrepetitt: No-Repeteat;

Når alt er ferdig, utfør koden og sjekk ut websiden din:

Nå har du et rent og elegant utseende av bakgrunnsbildet satt til taggen.

God praksis for å sette bakgrunnsbilder

• • Velg et bilde for å matche tekstfargen din.
  • Bruk attraktive fargekombinasjoner.
  • Hvis bakgrunnsbildet og tekstfargen din ikke samsvarer med hverandre, er websiden din dårlig designet.

Konklusjon

For å legge til et bakgrunnsbilde i CSS, bruk "bakgrunnsbilde”Eiendom og gi nettadressen til bildet i URL () -funksjonen til CSS. Du kan også forhindre at bildet ditt gjentar ved å bruke "Bakgrunnsrepetitt”Eiendom og sette verdien til“ingen”. Denne artikkelen forklarte prosedyren for å legge et bilde til bakgrunnen ved å bruke “bakgrunnsbilde”Og“Bakgrunnsrepetitt" egenskaper.