Introducere

Putem determina dimensiunea imaginii de fundal cu ajutorul proprietății background-size. Putem face imaginea la stânga, întinsă și potrivită pentru spațiul disponibil. Există atât de multe sintaxe pentru implementarea proprietății background-size. Putem seta proprietatea proprietății background-size cu ajutorul valorilor și valorilor unitare.

În valorile unitare, putem defini proprietatea background-size sub formă de procente sau pixeli. O putem defini și cu ajutorul valorii globale. Îl putem implementa cu ajutorul valorii globale cu ajutorul fragmentului de mai jos.

apurva padgaonkar

 .card-hero inherit 

Să înțelegem pe scurt subiectul.

Valorile cuvintelor cheie

Putem folosi valoarea cuvântului cheie cu ajutorul cover and contain. Putem schimba dimensiunea fundalului cu ajutorul acestor valori ale cuvintelor cheie.

1. Coperta:

Putem seta dimensiunea fundalului cu ajutorul cuvântului cheie cover. Dacă definim dimensiunea fundalului ca copertă, atunci imaginea se va potrivi în container fără a lăsa spațiu. De asemenea, va îmbunătăți imaginea pentru a se potrivi cu ecranul.

Să înțelegem acest lucru cu ajutorul exemplului de mai jos.

Exemplul 1:

Cod:

fonturi pentru gimp

 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> 

Ieșire

Explicaţie:

În codul de mai sus, trei imagini de fundal sunt combinate folosind proprietatea imagine de fundal. Proprietatea background-size specifică dimensiunile pentru fiecare imagine de fundal: 30% lățime pentru prima imagine, 40% lățime pentru a doua imagine și acoperire pentru a treia imagine. Proprietatea fundal-position este setată diferit pentru fiecare imagine pentru a crea o compoziție echilibrată.