logo

Bakgrunnsstørrelse i CSS

Introduksjon

Vi kan bestemme størrelsen på bakgrunnsbildet ved hjelp av egenskapen bakgrunnsstørrelse. Vi kan gjøre bildet som venstre, strukket og tilpasset den tilgjengelige plassen. Det er så mange syntakser for implementeringen av egenskapen i bakgrunnsstørrelse. Vi kan sette egenskapen til eiendom i bakgrunnsstørrelse ved hjelp av verdier og enhetsverdier.

I enhetsverdier kan vi definere egenskapen bakgrunnsstørrelse i form av prosenter eller piksler. Vi kan definere det ved hjelp av global verdi også. Vi kan implementere det ved hjelp av global verdi ved hjelp av utdraget nedenfor.

primærnøkkel og sammensatt nøkkel i sql
 .card-hero inherit 

La oss forstå emnet kort.

Søkeordverdier

Vi kan bruke nøkkelordet verdi ved hjelp av cover and contain. Vi kan endre bakgrunnsstørrelsen ved hjelp av disse søkeordverdiene.

1. Omslag:

Vi kan stille inn bakgrunnsstørrelsen ved hjelp av nøkkelordet omslag. Hvis vi definerer bakgrunnsstørrelsen som et deksel, vil bildet passe inn i beholderen uten å etterlate noe plass. Det vil også forbedre bildet slik at det passer til skjermen.

La oss forstå dette ved hjelp av eksemplet nedenfor.

Eksempel 1:

Kode:

 Document body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: #f0f0f0; } .background-container { position: relative; width: 100vw; height: 100vh; background-image: url(&apos;https://e0.pxfuel.com/wallpapers/163/906/desktop-wallpaper-beautiful-nature-with-girl-beautiful-girl-with-nature-and-moon-high-resolution-beautiful.webp&apos;); background-size: cover; background-position: center; text-align: center; color: white; } .background-container h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.5rem; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); } <p>Where every step unveils a new wonder.</p> 

Produksjon

charat java
Bakgrunnsstørrelse i CSS

Forklaring:

I koden ovenfor er tre bakgrunnsbilder kombinert med bakgrunnsbildeegenskapen. Egenskapen for bakgrunnsstørrelse spesifiserer størrelsene for hvert bakgrunnsbilde: 30 % bredde for det første bildet, 40 % bredde for det andre bildet og omslag for det tredje bildet. Bakgrunnsposisjonsegenskapen settes forskjellig for hvert bilde for å skape en balansert komposisjon.