Korištenje CSS-a za postavljanje pozadinske slike

• Travanj 28, 2024

Jeste li se ikad zapitali kako web stranice upravljaju lijepim dizajnom i slikama koje lebde iza teksta? Sve je to učinjeno pomoću magije kaskadnih tablica stilova. CSS ne samo da vam omogućava da odredite sliku za pozadinu stranice, već vam omogućuje i podešavanje načina na koji se slika prikazuje - tako da možete dobiti samo željeni izgled.

Temeljni građevni blok vaše pozadinske slike je, dovoljno je prikladno, svojstvo 'background-image'. Ovim entitetom možete obavijestiti svoju web lokaciju gdje se nalazi slikovna datoteka na sljedeći način:

tijelo {
background-image: url ("image.gif");
}

To je sve što trebate učiniti kako biste postavili pozadinsku sliku za svoju web stranicu. Naravno, vjerojatno ćete htjeti prilagoditi način na koji se slika pojavljuje. Recimo da želite da vaša slika započne na vrhu stranice, ali da bude centrirana vodoravno, umjesto u lijevo (zadano poravnanje). U tom ćete slučaju htjeti dodati svojstvo 'background-position' vašem CSS pravilu:

tijelo {
background-image: url ("image.gif");
pozadinski položaj: središnji vrh;
}

Kod definiranja svojstva 'pozadina-pozicija', prva vrijednost postavlja vodoravno poravnanje (lijevo, središte ili udesno), a druga postavlja vertikalno poravnanje slike (gornji, srednji ili donji).

Zatim odlučite da želite spriječiti da se slika horizontalno poklapa (ponavlja se), iako želite da se pločice okomito. Vrijeme je da izvadite svojstvo "pozadina-ponavljanje":

tijelo {
background-image: url ("image.gif");
pozadinski položaj: središnji vrh;
pozadina-ponoviti: ponoviti-y;
}

Postavljanje vrijednosti na 'repeat-y' upućuje preglednik da postavlja pozadinsku sliku duž osi y, vertikalno, ali ne i osi x (vodoravno), što je upravo ono što smo željeli. Ako biste željeli položiti vodoravno, ali ne okomito, umjesto toga upotrijebite vrijednost 'repeat-x'; ako uopće niste željeli da se slika poploči, dodijelite joj vrijednost "nema ponavljanja". Zadana vrijednost je postavljanje slike u vodoravnom i okomitom položaju, tako da ako je to najbolji izbor za vašu sliku, uopšte vam nije potrebno postavljati svojstvo 'pozadina-ponavljanje'.

Na kraju, možete pogledati svojstvo "priloga u pozadini". Vaša će se slika prema zadanom pomicati kako stranica pomiče, tako da ako sliku ne ponavljate okomito i imate dugu stranicu, slika se neće proširiti na dno stranice. To možete promijeniti postavljanjem svojstva 'prilog u pozadini' na 'fiksno', zbog čega pozadinska slika ostaje na istom mjestu na monitoru, bez obzira na to kako se stranica pomiče. Sada će pravila za pozadinsku sliku izgledati ovako:

tijelo {
background-image: url ("image.gif");
pozadinski položaj: središnji vrh;
pozadina-ponoviti: ponoviti-y;
pozadinski prilog: fiksna;
}


Ako želite zadržati CSS pravila što je moguće manje, možete kombinirati sve pozadinske vrijednosti u jedan redak koristeći svojstvo 'background', poput ovog:

pozadina {
url ("image.gif") ponovite-y fiksni središnji vrh;
}

Kada koristite svojstvo 'background', morate navesti vrijednosti određenim redoslijedom:
[boja pozadine (ako se koristi)] [pozadina-slika] [pozadina-ponavljanje] [pozadina-prilog] [pozadina-položaj]. Možete izostaviti bilo koju vrijednost koja vam nije potrebna, samo trebate navesti sve vrijednosti koje koristite pravim redoslijedom ili pravilo neće raditi.

Upute Video: xHTML - CSS za početnike Tutorijal 21 - Stavljanje boje i slike na pozadinu (Travanj 2024).