CSS kontrola pozadine

Svaki elemenat može imati postavljenu boju pozadine. Međutim, osim boje, moguće je zadati i sliku u pozadini. Tu postaje zanimljivo, pošto CSS omogućava da onda odredimo kolika će biti ta slika, gde će biti prikazana, da li će se ponavljati ili ne...

Kao da to nije dovoljno, u pozadinu istog elementa možemo ubaciti više slika, a onda za sve njih određivati pomenute parametre.

A onda na sve to dodajte da se pozadina može samo delimično prikazati pa čak i animirati, jasno je da zabavi nema kraja.

Pročitajte celu lekciju, a onda pogledajte i premier koji smo vam pripremili.

background-color

Ovaj atribut definiše boju pozadine. Moguće je koristiti istovremeno i boju pozadine i sliku u pozadini. Dozvoljene vrednosti su:

• [boja] - kolorna vrednost
• transparent - providna pozadina
• currentColor - boja pozadine je jednaka trenutno kalkulisanoj boji teksta (zgodno ako treba podesiti boju pozadine u podređenom elementu)
• inherit - boja pozadine se nasleđuje od nadređenog elementa

  background-color: #fff;
  background-color: rgba(255,100,100, 0.3);
  background-color: transparent;
  

background-image

Slika koja se prikazuje u pozadini elementa. Slika zauzima isti prostor kao i boja pozadine (sadržaj i prostor unutrašnje margine). Inače, slika "nadjačava" boju pozadine. Način na koji se navodi vrednost:

• [URL] - kao parametar funkcije, navodi se putanja do slike unutar navodnika ili apostrofa
  npr. url("slika.jpg")
• none - eliminiše slike u pozadini
• inherit - slika u pozadini se nasleđuje od nadređenog elementa

U svim modernijim web čitačima podržane su višestruke pozadine. To znači da je moguće navesti više uzastopnih slika, tako što se navede više url() funkcija odvojenih zarezom. Pri tome, prva slika je "najjača" i biće iznad ostalih, zatim idu druga, pa treća, itd.

  background-image: url("http://webnstudy.com/img/back-star.png");
  background-image: url('img/back-star.png'), url("img/back-love.png");

background-repeat

Određuje način ponavljanja slike u pozadini. Ukoliko se ponavljanje slike ograniči, na mestima gde se ne pojavljuje slika, pozadina će biti obojena zadatom bojom pozadine. Unapred definisane vrednosti su:

• repeat - slika se ponavlja kao tapet dok ne ispuni celu pozadinu (default)
• no-repeat - slika u pozadini će se prikazati samo jednom, bez ponavljanja
• repeat-x - slika će se ponavljati samo po horizontali
• repeat-y - slika će se ponavljati samo po vertikali
• inherit - ponavljanje slike se nasleđuje

Moguće je zadati samo jednu ili dve vrednosti. Kada se zadaju dve vrednosti, koriste se samo repeat i no-repeat, pošto se prva vrednost odnosi na ponavljanje po horizontali, a druga po vertikali. Po našem mišljenju, praktičnije je koristiti samo jednu vrednost.

Ako smo definisali više slika, možemo navesti višestruke vrednosti odvojene zarezima.

  background-repeat: repeat-x;
  background-repeat: repeat no-repeat;

background-size

Ovaj atribut koji definiše veličinu slike u pozadini. Postoje dve predefinisane vrednosti, a moguće je zadati i konkretne, metričke (ili procentualne) vrednosti.

• cover - slika će se prilagoditi veličini objekta i to njegovoj dužoj ivici, tako da ga uvek pokriva (slika može da se ne vidi cela)
• contain - slika će se prilagoditi veličini objekta i to njegovoj kraćoj ivici, tako da se uvek vidi cela slika (deo elementa možda neće biti pokriven slikom)
• [metrika] - dimenzija slike zadata kao neka konkretna vrednost u px, em...
• [procenat] - dimenzija slike je relativna vrednost u odnosu na dimenzije elementa
• auto - zadaje se uz metriku ili procenat i označava da se ta dimenzija računa proporcionalno, a ako se zada samostalno, slika se prikazuje u originalu
• inherit - veličina slike se nasleđuje

  background-size: cover;
  background-size: 120px;
  background-size: auto 200px;
  background-size: 10% 30%;

background-position

Određuje poziciju slike u pozadini. Najveći efekat se postiže ako je ponavljanje slike ograničeno. Moguće je zadati sledeće vrednosti za horizontalno pozicioniranje:

• left - pozicioniranje po levoj strani
• center - pozicioniranje po sredini
• right - pozicioniranje po desnoj strani
• [metrika] - bilo koja vrednost koja označava X koordinatu pozicije pozadine
• [procenat] - relativna vrednost u odnosu na dimenzije elementa po horizontali

Za vertikalno pozicioniranje su:

• top - pozicioniranje prema vrhu
• center - pozicioniranje po sredini
• bottom - pozicioniranje prema dnu
• [metrika] - bilo koja vrednost koja označava Y koordinatu pozicije pozadine
• [procenat] - relativna vrednost u odnosu na dimenzije elementa po vertikali

Uobičajeno se zadaju dve vrednosti - jedna se odnosi na pozicioniranje po horizontali, a druga za pozicioniranje po vertikali. Ukoliko se druga vrednost ne navede, podrazumeva se center.

Ako zadajemo metričke ili procentualne pozicije, treba da znamo da vrednosti mogu biti i negativne. Ovo koristimo kada želimo da smestimo veliki broj sličica ("sprajtova") na istu sliku u pozadini, a onda na elementu prikažemo samo jednu od njih, pošto ovim atributom možemo precizno da odredimo koji deo pozadine se prikazuje u gornjem-levom uglu elementa. Zašto bismo uopšte ovo radili? Pa ova tehnika je prilično praktična pošto će se jedna velika slika brže učitati sa servera nego ogroman broj malih. Najviše se koristi za 2D igre, koje koriste sprajtove za animaciju likova.

Ako se slika ponavlja (background-repeat), ovaj atribut definiše odakle se "počinje".

  background-position: center;
  background-position: right bottom;
  background-position: 50% 20%;
  background-position: 10px 10px;

background-origin

Definiše prostor unutar elementa koji se obuhvata pozicioniranjem. Suštinski, određuje "koordinatni početak", odnosno "odakle se gleda" kada se određuje pozicija slike. Moguće vrednosti su:

• padding-box - prostor obuhvata sadržaj sa unutrašnjom margina, bez bordera (default)
• border-box - prostor obuhvata i okvir
• content-box - prostor obuhvata samo sadržaj

background-clip

Definiše prostor unutar elementa u kome se pozadina prikazuje. To znači da će van zadate granice pozadina biti "isečena". Moguće vrednosti su:

• padding-box - prostor obuhvata sadržaj sa unutrašnjom margina, bez bordera (default)
• border-box - prostor obuhvata i okvir (pazite, okvir se uvek iscrtava preko pozadine)
• content-box - prostor obuhvata samo sadržaj

background-attachment

Određuje način "lepljenja" slike u pozadini, tačnije kako će se slika ponašati prilikom scroll-ovanja stranice, odnosno elementa. Unapred definisane vrednosti su:

• scroll - slika "putuje" sa blokom prilikom scrollovanja cele stranice, ali ako se scrolluje sam tekst u bloku, ponaša se kao vodeni žig (default)
• fixed - slika će uvek ostati nepomična i to na nivou cele stranice - efekat vodenog žiga (čak su i pozicioniranje i veličina slike u odnosu na stranicu)
• local - pozadina je vezana za sadržaj elementa (ima smisla kada i na elementu ima scroll-barova)
• inherit - ponašanje pozadine se nasleđuje

background-blend-mode

Određuje način kolornog miksovanja slika u pozadini (međusobno i sa bojom pozadine). Ovo je slično efektima za kombinovanje slojeva (layers) u programima za obradu grafike, poput Photoshopa. Za sliku koja se "nanosi" sa nekim od ovih kolornih efekata, gleda se svaki piksel u odnosu na odgovarajući piksel originalnog prikaza (slike, boje, teksta...) u pozadini i onda se na osnovu boja obe tačkice vrši određena matematička operacija. Moguće vrednosti su:

• multiply - kolorne vrednosti originalne i nove boje se množe (crna boja uvek zacrnjuje, bela nema efekat - kao kada preklapamo dve providne folije)
• screen - originalna i nova boja se invertuju, zatim se množe i dobijena boja ponovo invertuje (crna boja nema efekat, a bela uvek "zabeljuje" - kao kada dve slike projektujemo jednu preko druge na belom platnu)
• overlay - ako je nova boja svetlija od originalne, radi se multiply, a screen ako je tamnija
• darken - boja se dobija tako što se za svaki RGB kolorni kanal originalne i nove boje, izabere manja (tamnija) vrednost
• lighten - boja se dobija tako što se za svaki RGB kolorni kanal originalne i nove boje, izabere veća (svetlija) vrednost
• color-dodge - vrednost originalne boje se deli invertovanom vrednošću nove boje (krajnji efekat podseća na screen efekat)
• color-burn - originalna boja se invertuje, zatim deli vrednošću nove boje, pa se dobijena vrednost ponovo invertuje (krajnji efekat je sličan multiply efektu)
• hard-light - ako je nova boja tamnija od originalne, radi se multiply, a screen ako je svetlija (efekat je kao da smo usmerili snažno svetlo sa slikom ka originalnoj pozadini)
• soft-light - kao hard-light, samo manjeg intenziteta
• difference - tamnija boja se oduzima od svetlije (crna neće imati efekta, dok će bela invertovati donju sliku)
• exclusion - kao difference sa umanjenim kontrastom
• hue - koristi se nijansa (hue) boje koja se "nanosi", a zasićenje i svetlina se uzimaju od originalne boje
• saturation - koristi se zasićenje (saturation) boje koja se nanosi, a nijansa i svetlina originalne boje (siva boja nema efekat)
• color - koristi se zasićenje i nijansa nove boje, a svetlina originalne
• luminosity - koristi se svetlina (luminosity) nove boje, a nijansa i zasićenost originalne

Naravno, moguće je zadati i "opšte" vrednosti:

• normal - slika se iscrtava bez kolornog miksovanja
• initial - inicijalna vrednost
• unset - poništavanje kolornog miksovanja
• inherit - kolorno miksovanje slika se nasleđuje

Znači, kao što se može zadati više pozadinskih slika, tako se može zadati i više različitih blendinga kojim se određuje kako se svaka slika "primenjuje" na slike ispod nje.

  npr.
  background-blend-mode: overlay;
  ili npr.
  background-blend-mode: multiply, normal;

Znamo da su opisi svih ovih načina miksovanja boja malo teški za razumevanje, ali spremili smo i primer, a slika (kolorno miksovana) govori više od hiljadu reči.

background

Kompleksan atribut kojim se može zadati više parametara pozadine istovremeno. Ne moraju biti zadate sve vrednosti, a redosled takođe (uglavnom) nije bitan. Vrednosti koje se mogu podesti su:

• [boja] - boja pozadine (background-color)
• [URL slike] - slika u pozadini (background-image)
• [ponavljanje] - da li se (i kako) slika ponavlja (background-repeat)
• [prostiranje] - na kom prostoru se vidi slika (background-clip)
• [lepljenje] - kako se slika ponaša prilikom skrolovanja (background-attachment)
• [pozicija] - pozicija slike (background-position)
• [veličina] - veličina slike je jedina vrednost koja mora da se zada posle pozicije i uvek sa vodećom kosom crtom (background-size)

  background: #ffd url("slika.jpg") no-repeat /50%;

  background-color: #ffd;
  background-image: url("slika.jpg");
  background-repeat: no-repeat;
  background-size: 50%;

  background: url("slika.jpg") center/100px repeat content-box local;
  
  background-image: url("slika.jpg");
  background-position: center;
  background-size: 100px;
  background-repeat: repeat;
  background-clip: content-box;
  background-attachment: local;