Som standard vises på en webside et bilde på øverste venstre hjørne av skjermen og gjentas horisontalt og vertikalt. For å endre sin nåværende posisjon, tilbyr CSS imidlertid en "Bakgrunnsposisjon”Eiendom som spesifiserer bakgrunnsbildets posisjon, for eksempel senteret.

I denne artikkelen vil vi lære hvordan du kan angi plassering av et bakgrunnsbilde ved hjelp av eksempler. For å gjøre det, for det første, vil vi demonstrere prosedyren for å legge til et bilde som bakgrunn i CSS.

Legg til bakgrunnsbilder ved å bruke "bakgrunnsbilde" -egenskap

For å legge til bilder i bakgrunnen, "bakgrunnsbilde”Eiendom brukes.

Syntaks

Følgende er syntaks for å sette et bakgrunnsbilde til et HTML -element:

Bakgrunnsbilde: URL ();

Her, “URL ()”Angir bildens navn eller bildemappebane som den eksisterer.

Gå nå til det praktiske eksemplet på å bruke bakgrunnsbildeegenskapen.

Eksempel: Å sette inn et bakgrunnsbilde ved hjelp av CSS

I dette eksemplet vil vi lage en

element, og bakgrunn vil bli lagt til bak dette elementet. Du kan legge til elementer i henhold til ditt valg og bruke bakgrunnsbildeegenskapen på det:

Linuxhint

Etter det, flytt til CSS, bruk "bakgrunnsbilde”Eiendom, tilordne bildeveien eller navnet i AS“URL ()”Verdien av bakgrunnsbildeegenskapen:

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

Dette vil gi følgende utfall:

Slik kan du legge til et bakgrunnsbilde i CSS.

Hvordan du sentrerer bakgrunnsbilder ved å bruke "bakgrunnsstilling" CSS-eiendom?

“Bakgrunnsposisjon”Eiendom setter bakgrunnsbildets posisjon. Syntaksen vil være som følger:

Bakgrunnsposisjon: Verdi

Bildets posisjon kan spesifiseres som absolutt, venstre eller høyre. Mer spesifikt å sette "senter”Verdien vil sentrere det ekstra bakgrunnsbildet.

La oss nå flytte til det praktiske eksemplet som viser hvordan vi bruker bakgrunnsbilde- og bakgrunnsstillingens egenskaper i CSS.

Eksempel: Hvordan sette bakgrunnsbilde i sentrum?

Vi vil sette bakgrunnsfarge og bildebane med "bakgrunn”Eiendom. Deretter vil vi bruke "Bakgrunnsposisjon”Eiendom for å sette bakgrunnsbildet i sentrum. Endelig vil vi sette "Bakgrunnsrepetitt”Eiendom til ingen gjentakelse for ikke å gjenta bildet:

kropp
Bakgrunn: RGB (128, 44, 12) URL ("Bilde.jpg ") fast;
Bakgrunnsposisjon: sentrum;
Bakgrunnsrepetitt: No-Repeteat;

Når alt er gjort, utfør koden, og la oss se på det endelige resultatet:

Bakgrunnsbildet vårt er vellykket plassert i midten av siden.

Konklusjon

Bakgrunnsbilder kan legges til ved hjelp av bakgrunnsbildeegenskapen, mens bakgrunnsposisjon kan settes ved hjelp av bakgrunnsposisjonsegenskapen. Til sentrum setter bakgrunnsbildet i CSS verdien av bakgrunnsstillingens egenskap til “senter”. Artikkelen forklarer i detalj hvordan du legger et bilde til bakgrunnen ved å bruke "bakgrunnsbilde”Og hvordan du setter sin posisjon ved å bruke“Bakgrunnsposisjon”Eiendom.