CSS3 - Pozadina (Background)

Korištenje CSS3 pozadine (Background)

CSS3 nudi nekoliko novih svojstava za manipulaciju pozadinom elementa poput isjecanja pozadine, više pozadina i mogućnosti prilagođavanja veličine pozadine. Sljedeći dio opisaće vam sva nova pozadinska svojstva CSS3, a za ostala svojstva povezana sa pozadinom pogledajte lekciju CSS pozadine.


Svojstvo veličine pozadine (background-size) CSS3

Svojstvo background-size može se koristiti za određivanje veličine slika u pozadini. Prije CSS3, veličina pozadinskih slika određivala se stvarnom veličinom slika. Veličina slike u pozadini može se odrediti pomoću vrijednosti piksela ili postotka, kao i ključnih riječi: auto, contain, i cover. Negativne vrijednosti nisu dozvoljene. 

.box {
    width: 250px;
    height: 150px;
    background: url("images/sky.jpg") no-repeat;
    background-size: contain;
    border: 6px solid #333;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer podešavanja background-size elementa</title>
<style>
  .box {
    width: 250px;
    height: 150px;
    background: url("/examples/images/sky.jpg") no-repeat;
    background-size: contain;
    border: 6px solid #333;
  } 
</style>
</head>
<body>
    <div class="box"></div>
    <p><strong>Napomena:</strong> Izvorna veličina pozadinske 
    slike je 500x300 piksela, ali koristeći svojstvo CSS background-size i 
    dalje možemo prikazati kompletnu sliku u manjem okviru.</p>
</body>
</html>

CSS3 background-clip svojstvo

Svojstvo background-clip može se koristiti za određivanje da li se pozadina proteže u granicama elementa ili ne. Svojstvo background-clip može imati tri vrijednosti: border-box, padding-box, content-box. 

.box {
    width: 250px;
    height: 150px;
    padding: 10px;
    border: 6px dashed #333;
    background: orange;
    background-clip: content-box;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 Background Clipping</title>
<style>
  .box {
    width: 250px;
    height: 150px;
    padding: 10px;
    border: 6px dashed #333;
    background: orange;
  }
  .clip1 {
    background-clip: border-box;
  }
  .clip2 {
    background-clip: padding-box;
  }
  .clip3 {
    background-clip: content-box;
  }
</style>
</head>
<body>
    <h2>Zadano ponašanje u pozadini</h2>
    <div class="box"></div>
    <h2>Isecanje pozadine pomoću border-box</h2>
    <div class="box clip1"></div>
    <h2>Isecanje pozadine pomoću padding-box</h2>
    <div class="box clip2"></div>
    <h2>Isecanje pozadine pomoću content-box</h2>
    <div class="box clip3"></div>
</body>
</html>

Pogledajte lekciju o CSS box modelu okvira da biste saznali više o okvirima elemenata.


CSS3 background-origin svojstvo

Svojstvo background-origin može se koristiti za određivanje područja pozicioniranja pozadinskih slika. Može uzeti iste vrijednosti kao svojstvo background-clip: border-box, padding-box, content-box. 

.box {
    width: 250px;
    height: 150px;
    padding: 10px;
    border: 6px dashed #333;
    background: url("images/sky.jpg") no-repeat;
    background-size: contain;
    background-origin: content-box;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer podešavanja background-origin elemnta</title>
<style>
  .box {
      width: 250px;
      height: 150px;
      padding: 10px;
      border: 6px dashed #333;
      background: url("/examples/images/sky.jpg") no-repeat;
      background-size: contain;
      background-origin: content-box;
  } 
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

CSS3 Višestruke pozadine

CSS3 vam daje mogućnost dodavanja više pozadina jednom elementu. Pozadine su naslojene jedna na drugu. Broj slojeva određuje se brojem vrijednosti odvojenih zarezom u svojstvu background-image ili background. 

.box {
    width: 100%;
    height: 500px;
    background: url("images/birds.png") no-repeat center,  url("images/clouds.png")  no-repeat center, lightblue;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 Višestruke pozadine</title>
<style>
  .box {
    width: 100%;
    height: 500px;
    background: url("/examples/images/birds.png") no-repeat
    center,  url("/examples/images/clouds.png")  no-repeat center, 
    url("/examples/images/sun.png")  no-repeat 10% 30%, lightblue;
  }
</style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Prva vrijednost na popisu pozadina odvojenih zarezima, tj. background-image 'birds.png' pojaviće se na vrhu, a zadnja vrijednost, tj. boja 'lightblue' pojaviće se pri dnu. Samo zadnja pozadina može da sadrži boju pozadine.