I HTML brukes bakgrunnsbilder til å style og forbedre utseendet på websidene. Som standard vises websidebilder i øverste venstre hjørne av skjermen. Du kan imidlertid endre størrelsen på bildet i fullskjermmodus. CSS gir "Bakgrunnsposisjon”Og“bakgrunnsstørrelse”Egenskaper som kan brukes til å tvinge et bilde til å vises på hele skjermen.

I denne håndboken lærer du metoden for å legge til et bakgrunnsbilde i fullskjermmodus.

La oss komme i gang!

Hvordan lage bakgrunnsbilde på full skjerm ved hjelp av CSS?

For å lage fullskjermbakgrunn ved hjelp av CSS, først, lag en div og juster bredden og høyden, og margin for å få den til å vises på fullskjerm ved hjelp av "bredde”,“høyde”, Og“margin”Egenskaper til CSS. Legg deretter en kant rundt den ved å bruke "grense”Eiendom. For å stille grensen i henhold til skjermen, bruk "Bokstørrelse”Eiendom. Når det er gjort, vil vi bruke eiendommen til “bakgrunn”For å legge til bildet i bakgrunnen.

Syntaksen til bakgrunnsegenskapen er:

Bakgrunn: Bakgrunnsbilde (URL) bakgrunnsrepetitt bakgrunnsposisjon/ bakgrunnsstørrelse

I ovennevnte syntaks er følgende fire egenskaper til bakgrunnsegenskapen nevnt:

• bakgrunnsbilde: Det brukes til å legge til et bilde som bakgrunn.
• Bakgrunnsrepetitt: Det brukes til å angi mønsteret for repetisjonen av bakgrunnsbildet, for eksempel No-Repeteat, gjenta horisontalt og gjenta vertikalt.
• Bakgrunnsposisjon: Det brukes til å justere posisjonen til bildet, for eksempel sentrum, venstre og høyre.
• Bakgrunnsstørrelse: Det brukes til å stille størrelsen på bildet, for eksempel bil, deksel og lengde.

La oss flytte til eksemplet der vi skal lage et bakgrunnsbilde på full skjerm ved hjelp av CSS.

Eksempel

I HTML oppretter vi en beholder og angir klassenavnet som "div”Og legg til overskriften ved hjelp av

stikkord. For å plassere overskriften i midten av siden, vil vi dessuten bruke taggen.

Html

Velkommen til Linuxhint

Tilordne deretter verdien av marginegenskapen som "0”Og høyde som“100px”Til hele kroppen til HTML.

CSS

html, kropp
Margin: 0;
Høyde: 100%;

I neste trinn, stil den opprettede containeren ved å bruke “div”Og juster bredden og høyden på divet som“100px”. Vi vil bruke grenseeiendommer for å legge til grensen rundt div med "25px”Bredde, stil som”spor”Og fargen på grensen som“RGB (184, 147, 147)”:

div
Bredde: 100%;
Høyde: 100%;
Border: 25px Groove RGB (184, 147, 147);

Utfallet av den ovennevnte koden er gitt nedenfor. Du kan se at overskriften og grensen er opprettet:

Merk: Som du kan se, i det ovennevnte bildegrensen fra høyre og bunnen er skjult, er dette fordi bredden og høyden på diven allerede er "100%”, Så når vi legger til en kant, vil ytterligere bredde og høyde legges til. For å unngå dette, vil vi bruke “Bokstørrelse”Eiendom til CSS, da det lar oss inkludere en grense i elementets bredde og høyde.

For å gjøre det, vil vi sette verdien av kassestørrelse som “grenseboks”For å inkludere grensen innenfor den totale bredden og høyden på Div:

Bokstørrelse: Border-Box;

Det undergitte bildet indikerer at grensen er vellykket plassert innenfor bredden og høyden av div:

Nå vil vi legge til bakgrunnsbildet ved å bruke “bakgrunnsbilde”Eiendom og spesifiser bilde -URL -en i den som“URL (bilde.jpg)”:

div
Bakgrunn: URL ("Bilde.jpg ");

I det undervernede bildet kan du se at bakgrunnsbildet blir lagt til, men det er repeterende:

For å unngå repetisjon av bildet, "Bakgrunnsrepetitt”Eiendom brukes. Her vil vi sette verdien av bakgrunnsrepetisjon som “Ingen repeter”:

div
Bakgrunnsbilde: URL ("Bilde.jpg ");
Bakgrunnsrepetitt: No-Repeteat;

I den undervernede utgangen kan du se at repetisjonen av bildet stoppes; Bildet vises imidlertid ikke på skjermen:

For å vise bildet på fullskjerm, bruker vi “bakgrunnsstørrelse”Eiendom. Og angi verdien som "dekke”, Som betyr at bildet vil dekke hele området til den opprettede beholderen:

div
Bakgrunnsbilde: URL ("Bilde.jpg ");
Bakgrunnsrepetitt: No-Repeteat;
Bakgrunnsstørrelse: Deksel;

Bildet nedenfor indikerer at bildet vises på fullskjerm og er avskåret. Dette er fordi størrelsen på bildet er større enn DIV -størrelsen:

For å løse dette problemet, bruk "Bakgrunnsposisjon”Eiendom og angi posisjonen til bildet som“senter”:

div
Bakgrunnsbilde: URL ("Bilde.jpg ");
Bakgrunnsrepetitt: No-Repeteat;
Bakgrunnsstørrelse: Deksel;
Bakgrunnsposisjon: sentrum;

Som et resultat vises det valgte bildet i fullskjermmodus:

Det er det! Vi har forklart metoden for å lage et bakgrunnsbilde på full skjerm ved hjelp av CSS.

Konklusjon

For å lage et bakgrunnsbilde på full skjerm ved hjelp av CSS, først, lag en div og sett bredden, høyden og marginene for å fylle skjermen. Etter det, lag en grense rundt div, og legg deretter et bilde til den ved å bruke "bakgrunnsbilde”Eiendom. For å justere bildet i henhold til fullskjerm, bruk "Bakgrunnsrepetitt”,“bakgrunnsstørrelse”, Og“Bakgrunnsposisjon" egenskaper. Denne artikkelen har forklart den komplette metoden for å lage bakgrunnsbilde med full skjerm ved hjelp av CSS.