Acest tutorial vă va arăta o modalitate simplă de codificare a unei imagini de fundal a paginii complete utilizând CSS. Și veți afla, de asemenea, cum să faceți ca acea imagine să răspundă la dimensiunea ecranului utilizatorilor dvs.

Realizarea unei imagini de fundal complet întinse pentru a acoperi întreaga fereastră a browserului este o sarcină obișnuită în designul web. Din fericire, această sarcină poate fi ocupată cu câteva linii de CSS.

Cover Viewport cu imagine

Mai întâi, vom dori să ne asigurăm că pagina noastră acoperă de fapt întreaga fereastră:

html {
   min-height: 100%;
}

Interior html, vom folosi background-image proprietate pentru a seta imaginea:

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

Magia proprietății „Dimensiunea fundalului”

Magia se întâmplă cu background-size proprietate:

background-size: cover;

cover spune browserului să se asigure că imaginea acoperă întotdeauna întregul container, în acest caz html. Browserul va acoperi containerul chiar dacă trebuie să întindă imaginea sau să taie puțin marginile.

Deoarece browserul poate întinde imaginea, ar trebui să utilizați o imagine de fundal cu o rezoluție suficient de mare. În caz contrar, imaginea poate apărea pixelată.

Dacă îți pasă să apară toată imaginea în fundal, atunci vei dori să te asiguri că imaginea are un raport de aspect relativ apropiat în comparație cu dimensiunea ecranului.

Cum să reglați fin o poziție a imaginii și să evitați placarea

De asemenea, browserul poate alege să afișeze imaginea de fundal sub formă de plăci, în funcție de dimensiunea acesteia. Pentru a preveni acest lucru, utilizați no-repeat:

background-repeat: no-repeat;

Pentru a păstra lucrurile frumoase, ne vom păstra imaginea mereu centrată:

background-position: center center;

Aceasta va centra imaginea atât orizontal cât și vertical în orice moment.

Acum am produs o imagine complet receptivă, care va acoperi întotdeauna întregul fundal:

html {
   min-height: 100%;
   background-image: url(image.jpg);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
}

Cum să remediați o imagine în loc atunci când derulați

Acum, doar în cazul în care doriți să adăugați text deasupra imaginii de fundal și textul respectiv să revarsă fereastra curentă, vă recomandăm să vă asigurați că imaginea dvs. rămâne în fundal atunci când utilizatorul derulează în jos pentru a vedea restul textului:

background-attachment: fixed;

Puteți include toate proprietățile de fundal descrise mai sus folosind notația scurtă:

background: url(image.jpg) center center cover no-repeat fixed;

Opțional: Cum se adaugă o interogare media pentru mobil

Pentru a adăuga o cireașă pe tort, poate doriți să adăugați o interogare media pentru ecrane mai mici:

@media only screen and (max-width: 767px) {
  html {
     background-image: url(smaller-image.jpg);
  }
}

Puteți utiliza Photoshop sau un alt software de editare a imaginilor pentru a micșora imaginea originală pentru a îmbunătăți viteza de încărcare a paginii pe conexiunile la internet mobil.

Deci, acum, când cunoașteți magia creării unui fundal de imagine cu pagină completă, este timpul să creați câteva site-uri web frumoase!

Doriți să vedeți mai multe sfaturi și cunoștințe de dezvoltare web?