Bakgrunnsbildene har stor innvirkning på utseendet og følelsen av ethvert nettsted. Når vi blar på en webside/innhold, hva vil være atferden til bakgrunnsbildet? Om det også vil bevege seg med innhold eller ikke.

Vi vil! Som standard blar bakgrunnsbildet med innholdet. Bakgrunnsinnstillingsegenskapen brukes spesielt til å bestemme responsen til bakgrunnsbildet. Den bestemmer atferden til bakgrunnsbildet ved å bruke følgende verdier:

• fikset: Tilordne den faste verdien til bakgrunnsbildet vil fikse bildet på nettsiden.
• rulle: Rullverdien lar et bilde bla med innholdet.
• lokal: Den lokale verdien lar et bilde bla med innholdet i et element.

Denne oppskrivningen vil gi en detaljert forståelse av bakgrunnsinnstillingen i CSS. For bedre forståelse vil denne artikkelen vurdere noen eksempler med forskjellige bakgrunnsverdier.

Syntaks

Sybiten nedenfor beskriver syntaks for bakgrunnsinnstillingsegenskaper

Bakgrunnsinnrikt: Verdi

La oss diskutere hvilke verdier bakgrunnsinnstillingsegenskaper kan ta.

fast verdi

De "fikset" Verdien setter bildet til en bestemt posisjon. Bildet ville ikke bevege seg med innholdet.

Eksempel

Den undergitte koden vil forklare hvordan du angir fikset Verdi for eiendomsinnstillingsegenskapen

Html

Bakgrunnsbilde: Fast

Alt innholdet skrevet her!

CSS

kropp
Bakgrunnsbilde: URL ("Deksel.jpg ");
Bakgrunnsrepetitt: No-Repeteat;
Bakgrunnsposisjon: venstre topp;
Bakgrunnsinnrikt: Fast;

Ovennevnte kode genererer følgende utgang:

Utgangen tydeliggjør at bildet forblir fast.

rulleverdi

De “Rull” Verdien lar oss bla bildet med innholdet. For bedre forståelse bør du vurdere den gitte koden nedenfor:

Html

Bakgrunnsbilde: Rull

Alt innholdet skrevet her!

CSS

kropp
Bakgrunnsbilde: URL ("Deksel.jpg ");
Bakgrunnsrepetitt: No-Repeteat;
Bakgrunnsposisjon: venstre topp;
Bakgrunnsinnveksling: Scroll;

Ovennevnte kode vil produsere følgende utgang:

lokal verdi

Lokal verdi flytter bildet med innholdet i elementet. Imidlertid, hvis du implementerer det lokale i eksemplet ovenfor, vil resultatet se ut som rulleverdien. Så hvordan vi kan differensiere de lokale og rulleverdiene?

Forskjellen mellom de lokale og rulleverdiene kan legges merke til i et scenario der det er flere rullbare områder på en webside.

Eksempel

Dette eksemplet vil gi koden for lokal verdi for flere rullbare områder.

Html

Bakgrunnsbilde: Lokalt

Alt innhold kommer hit

CSS

.eske

Bredde: 500px;
Høyde: 500px;
Margin: 100px;
Grense: 10px solid svart;
overløp: auto;
Bakgrunnsbilde: URL ("Deksel.jpg ");
Bakgrunnsrepetitt: No-Repeteat;
Bakgrunnsinnrikt: Lokal;

Utgangen fra ovennevnte kode vil være slik:

Det er to rullefelt i outputten ovenfor. Når vi flytter en rullefelt i.e. intern eller ekstern bildet beveger seg med innholdet.

I koden ovenfor, bruk bla i stedet for lokal og observer forskjellen.

CSS -rulle

Bakgrunnsinnveksling: Scroll;

Følgende utgang vises for rulleverdien:

Det er to rullefelt. Når vi blar på den ytre linjen, beveger bildet med innholdet. Og når vi blar, forble det indre stangbildet løst.

Konklusjon

Bakgrunnsinnstillingsegenskapen spesifiserer hvordan et bakgrunnsbilde vil oppføre seg. Det tar tre verdier dvs. fast, bla, lokalt. "fikset" For å fikse bildet i en bestemt stilling, “Rull” å flytte bildet med innhold, og “Lokal” å flytte bildet med elementets innhold.

Denne oppskrivningen presenterte en detaljert oversikt over eiendommen. Videre demonstrerte denne oppskrivningen hvordan du bruker fast, rulle og lokal verdi for tilknytningseiendommen.