WEBnSTUDY.com
CSS

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.

background-color Boja pozadine
background-image Način da zadamo URL slike u pozadini
background-repeat Da li se slika u pozadini ponavlja i na koji način
background-size Veličina slike u pozadini
background-position Pozicija slike u pozadini
background-origin Definiše prostor za pozicioniranje slike u elementu
background-clip Prostiranje pozadine u elementu
background-attachment Definišemo kako se slika u pozadini ponaša prilikom skrolovanja
background-blend-mode Način kolornog miksovanja slika u pozadini (ako ih je zadato više) i boje pozadine
background Kompleksan atribut kojim se deifnišu boja, URL, ponavljanje, veličina, pozicija, ponašanje i prostiranje slike u pozadini

background-color

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

background-color: [boja]

Primeri za boju pozadine


  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:

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 ide druga, pa treća, itd.

background-image: url("[url slike]") background-image: url("[url slike 1]"), url("[url slike 2]"), ...

Primeri za sliku


  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:

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.

background-repeat: [vrednost] background-repeat: [horiz] [vert]

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

Primeri za ponavljanje


  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.

background-size: auto background-size: cover background-size: contain background-size: [širina] background-size: [širina] [visina] background-size: [širina] auto background-size: auto [visina] background-size: [vrednosti za prvu sliku], [vrednosti za drugu sliku], ...

Primeri za veličinu


  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. Unapred definisane vrednosti za horizontalno pozicioniranje su:

Za vertikalno pozicioniranje su:

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.

background-position: [horiz] background-position: [horiz] [vert] background-position: [vrednosti za prvu sliku], [vrednosti za drugu sliku], ...

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.

Ovo je prilično praktično ako imamo puno sličica (mnogo je brže sa servera učitati jednu veliku sliku nego ogroman broj malih). Ista ova tehnika je veoma zahvalna za 2D igre, koje koriste sprajtove za animaciju likova.

Ako se slika ponavlja, ovaj atribut definiše odakle se "počinje".

Primeri za poziciju


  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:

background-origin: [vrednost] background-origin: [vrednost], [vrednost], ...

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:

background-clip: [vrednost] background-clip: [vrednost], [vrednost], ...

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:

background-attachment: [vrednost] background-attachment: [vrednost], [vrednost], ...

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. Unapred definisane vrednosti su:

background-blend-mode: [vrednost] background-blend-mode: [vrednost], [vrednost], ...

Za svaku sliku se može zadati po jedan blending kojim se ona "primenjuje" na slike ispod nje.

Primeri za blending


  background-blend-mode: normal;
  background-blend-mode: overlay;
  background-blend-mode: multiply;

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:

background: [vrednosti]

Primeri za background

Evo nekoliko načina za definisanje pozadine. Kada ih pogledate, bacite se na veliki primer!


  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;

  1. Mozilla Developer Network, CSS Reference
  2. css3.info, CSS3: background-origin and background-clip
Svi elementi sajta Web'n'Study, osim onih za koje je navedeno da su u javnom vlasništvu, vlasništvo su autora i ne smeju se koristiti, u celosti ili delimično bez pismenog odobrenja autora. To uključuje tekstove, slike, ilustracije, animacije, prateći grafički materijal i programski kod.
Ovaj sajt koristi tehnologiju kolačića (cookies) radi vođenja interne statistike u cilju unapređenja korisničkog iskustva. Tako prikupljeni podaci su anonimni i nedostupni trećim licima. Vaša privatnost nije ugrožena ni na koji način.