Ved hjelp av HTML og CSS kan nettutviklere gjøre mange ting for å gjøre applikasjonen eller websidene mer pålitelige og effektive. Å legge inn responsive elementer er en av dem. Mer spesifikt betyr det responsive elementet når brukere åpner en webside på noen enhet, det vil ikke påvirke synligheten. Å legge til responsive bilder i CSS vil automatisk endre skjermstørrelsen.

Dette innlegget forklarte responsive CSS bakgrunnsbilder.

Hvordan legge til responsive CSS bakgrunnsbilder?

Følg instruksjonene nedenfor for å legge til det responsive bildet som bakgrunn.

Trinn 1: Lag div container

Opprinnelig lage en div -container ved hjelp av "”Merk og tilordne den en“id”Attributt med en verdi av ditt valg.

Trinn 2: Sett inn overskrift

Deretter legger du til en overskrift inne i "”Element ved å bruke“

" stikkord. Etter det, legg til litt tekst mellom "" -merkerne:

Bakgrunnsbilde

Fargerikt bilde av blader satt som bakgrunnen på denne siden. Nå kan vi lage ethvert dokument på denne siden.

Trinn 3: Angi bakgrunnsbilde

For å stille bakgrunnsbildet av element, får du først tilgang til elementet ved hjelp av "id" Egenskap. Deretter legger du til “bakgrunnsbilde”CSS -egenskap for å sette bildet på elementets bakside. Verdien av denne egenskapen spesifiserer URL -en til bildet.

Trinn 4: Gjør bakgrunnsbildet responsiv

For å gjøre bakgrunnsbildet responsivt, sett inn følgende CSS -egenskaper:

#img-background
Bakgrunnsbilde: URL ('Emoji.png ');
Høyde: 100%;
Bredde: 100%;
Bakgrunnsstørrelse: Deksel;
Bakgrunnsrepetitt: No-Repeteat;
Border: Auto Solid Red;

Beskrivelsen av den ovennevnte koden er nevnt som følger:

• “høyde”Eiendom brukt for å sette høyden på elementet.
• “bredde”Eiendom brukes til å definere elementstørrelsen horisontalt.
• “bakgrunnsstørrelse”Eiendom brukes til å sette størrelsen på bildet. For eksempel har vi verdien som "dekke”For å fylle bildet i elementet.
• “Bakgrunnsrepetitt”Eiendom setter om bildet vil gjenta eller ikke.
• “grense”Funksjonen brukes til å legge til grensen rundt elementet.

Det kan observeres at vi har gjort bakgrunnsbildet responsive:

Vi har forklart metoden for å legge til et responsivt bakgrunnsbilde med CSS.

Konklusjon

For å legge til det responsive CSS -bakgrunnsbildet, lag først en beholder sammen med "ID" -attributtet. Deretter får du tilgang til DIV -elementet ved å bruke "ID" i CSS og legge inn bakgrunnsbildet ved å bruke "bakgrunnsbilde”CSS -eiendom. Etter det, "bakgrunnsstørrelse”,“Bakgrunnsrepetitt”, Og“grense”Egenskaper brukes også til å gjøre bildet lydhør. Dette innlegget har vist hvordan du setter det responsive bakgrunnsbildet i CSS.