CSS - Pozadina

Postavljanje pozadinskih svojstava

Pozadina igra važnu ulogu u vizualnoj prezentaciji web stranice. CSS pruža nekoliko svojstava za oblikovanje pozadine elementa, uključujući bojanje pozadine, postavljanje slika u pozadinu, upravljanje njihovim pozicioniranjem itd. Svojstva pozadine su boja pozadine, slika pozadine, ponavljanje pozadine, prilog pozadine i pozicija pozadine. U sljedećem dijelu ćemo detaljnije raspravljati o svakom od ovih svojstava.


Boja pozadine

Svojstvo boje pozadine koristi se za postavljanje boje pozadine elementa. U sljedećem primjer pokazaćemo kako postaviti boju pozadine na kompletnu stranicu. 

body {
    background-color: #f0e68c;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanje svojstva background-color u CSS</title>
<style>
  body {
    background-color: #f0e68c;
    }
    h1 {
        background-color: #46c79c;
    }
</style>
</head>
<body>
    <h1>Pozadinska boja - Demo</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Nunc neque. In hac habitasse 
    platea dictumst. Pellentesque ultrices. Donec nunc metus, aliquam sit amet, aliquam in, 
    luctus ac, odio. Aenean orci velit, elementum ac, egestas pellentesque, facilisis non, 
    turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit 
    condimentum. Duis suscipit, 
    lectus varius fermentum fermentum, est lectus facilisis metus, ac 
    ornare risus ipsum at 
    sem. Nulla ut eros vel enim tempor.</p>
</body>
</html>

Vrijednosti boja u CSS-u najčešće se navode u sljedećim formatima:

  • Ime boje - poput "red"
  • HEX vrijednost - poput "#ff0000"
  • RGB vrijednost poput "rgb(255, 0, 0)"

Pogledajte lekciju o CSS boji kako biste saznali više o određivanju vrijednosti boja. CSS3 boje


Pozadinska slika

Svojstvo background-image postavlja sliku kao pozadinu HTML elementa. Pogledajmo sljedeći primjer koji pokazuje kako postaviti sliku na pozadinu stranice. 

body {
    background-image: url("images/tile.png");
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanje svojstva background-image u CSS</title>
<style>
    body {
        background-image: url("/examples/images/tile.png");
    }
</style>
</head>
<body>
    <h1>Pozadinska slika - Demo</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Nunc neque. In hac habitasse 
    platea dictumst. Pellentesque ultrices. Donec nunc metus, 
    aliquam sit amet, aliquam in, 
    luctus ac, odio. Aenean orci velit, elementum ac, egestas 
    pellentesque, facilisis non, 
    turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit 
    condimentum. Duis suscipit, 
    lectus varius fermentum fermentum, est lectus facilisis metus, ac
    ornare risus ipsum at 
    sem. Nulla ut eros vel enim tempor.</p>
</body>
</html>

Ponavljanje pozadine

Svojstvo background-repeat vam omogućava kontrolu načina ponavljanja ili polaganja pozadinske slike u pozadini elementa. Možete postaviti pozadinsku sliku koja će se ponavljati okomito (osa y), vodoravno (osa x), u jednom ili u oba smjera. Pogledajmo sljedeći primjer koji pokazuje kako postaviti pozadinu gradijenta za web stranicu ponavljanjem presječene slike vodoravno duž ose x. 

body {
    background-image: url("images/gradient.png");
    background-repeat: repeat-x;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanje horizontalnog svojstva background-repeat u CSS</title>
<style>
    body {
        background-image: url("/examples/images/gradient.png");
        background-repeat: repeat-x;
    }
</style>
</head>
<body>
    <h1>Ponavljanje pozadine - Demo</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Nunc neque. In hac habitasse 
    platea dictumst. Pellentesque ultrices. Donec nunc metus, 
    aliquam sit amet, aliquam in, 
    luctus ac, odio. Aenean orci velit, elementum ac, egestas 
    pellentesque, facilisis non, 
    turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit 
    condimentum. Duis suscipit, 
    lectus varius fermentum fermentum, est lectus facilisis metus, ac 
    ornare risus ipsum at 
    sem. Nulla ut eros vel enim tempor.</p>
</body>
</html>

Slično tome, možete upotrijebiti vrijednost repeat-y. Za ponavljanje pozadinske slike vertikalno duž osi y, ili vrijednost no-repeat kako biste u potpunosti spriječili ponavljanje. 

body {
    background-image: url("images/texture.png");
    background-repeat: no-repeat;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Isključivanje svojstva background-repeat u CSS</title>
<style>
    body {
        background-image: url("/examples/images/texture.png");
        background-repeat: no-repeat;
    }
</style>
</head>
<body>
    <h1>Ponavljanje pozadine - Demo</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Nunc neque. In hac habitasse 
    platea dictumst. Pellentesque ultrices. Donec nunc metus, aliquam sit amet, aliquam in, 
    luctus ac, odio. Aenean orci velit, elementum ac, egestas 
    pellentesque, facilisis non, 
    turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit 
    condimentum. Duis suscipit, 
    lectus varius fermentum fermentum, est lectus facilisis metus, ac 
    ornare risus ipsum at 
    sem. Nulla ut eros vel enim tempor.</p>
</body>
</html>

Pogledajmo sljedeću ilustraciju da bismo razumjeli kako ovo svojstvo zapravo djeluje.


Pozicioniranje pozadine

Svojstvo pozadinskog pozicioniranja koristi se za kontrolu položaja pozadinske slike. Ako pozicija pozadine nije navedena, pozadinska slika se postavlja na zadani gornji lijevi položaj elementa, tj. na (0,0), isprobajmo sljedeći primjer: 

body {
    background-image: url("images/robot.png");
    background-repeat: no-repeat;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Difoltna pozicija background-position slike u CSS</title>
<style>  
    body {
        background-image: url("/examples/images/robot.png");
        background-repeat: no-repeat;
    }
    h1, p {
        margin-left: 200px;
    }
</style>
</head>
<body>
    <h1>Pozadinska pozicija - Demo</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Nunc neque. In hac habitasse 
    platea dictumst. Pellentesque ultrices. Donec nunc metus, 
    aliquam sit amet, aliquam in, 
    luctus ac, odio. Aenean orci velit, elementum ac, egestas 
    pellentesque, facilisis non, 
    turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit 
    condimentum. Duis suscipit, 
    ectus varius fermentum fermentum, est lectus facilisis metus, ac 
    ornare risus ipsum at sem.</p>
</body>
</html>

U sljedećem primjeru pozadinska slika je smještena u gornjem desnom uglu. 

body {
    background-image: url("images/robot.png");
    background-repeat: no-repeat;
    background-position: right top;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Postavljanje prilagođenog položaja pozadine slika u CSS-u</title>
<style>  
    body {
        background-image: url("/examples/images/robot.png");
        background-repeat: no-repeat;
        background-position: 100% top;
    }
    h1, p {
        margin-right: 200px;
    }
</style>
</head>
<body>
    <h1>Background Position Demo</h1>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Nunc neque. In hac habitasse 
    platea dictumst. Pellentesque ultrices. Donec nunc metus, 
    aliquam sit amet, aliquam in, 
    luctus ac, odio. Aenean orci velit, elementum ac, egestas 
    pellentesque, facilisis non, 
    turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit 
    condimentum. Duis suscipit, 
    ectus varius fermentum fermentum, est lectus facilisis metus, ac 
    ornare risus ipsum at sem.</p>
</body>
</html>

Pored ključnih riječi, za ovo svojstvo možete koristiti i vrijednosti postotka ili dužine, poput px ili em. Pogledajmo sljedeću ilustraciju da bismo razumjeli kako ovo svojstvo zapravo djeluje.


Prilog pozadine

Svojstvo background-attachment određuje da li je pozadinska slika fiksirana s obzirom na prikazni prostor ili se pomiče zajedno sa blokom koji sadrži. Pogledajmo sljedeći primjer da bismo shvatili kako to u suštini funkcioniše: 

body {
    background-image: url("images/bell.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fiksirano svojstvo background-attachment u CSS</title>
<style>
    body {        
        background-image: url("/examples/images/bell.png");
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
    }
</style>
</head>
<body>
    <h1>Prilog pozadini - Demo</h1>
    <p><strong>Savjet:</strong> Pomaknite se prema dolje da biste 
    vidjeli kako funkcioniše svojstvo background-attachment.</p>
    <br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Nunc neque. In hac habitasse 
    platea dictumst. Pellentesque ultrices. Donec nunc metus, 
    aliquam sit amet, aliquam in, 
    luctus ac, odio. Aenean orci velit, elementum ac, egestas 
    pellentesque, facilisis non, 
    turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit 
    condimentum.</p>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Nunc neque. In hac habitasse 
    platea dictumst. Pellentesque ultrices. Donec nunc metus, 
    aliquam sit amet, aliquam in, 
    luctus ac, odio. Aenean orci velit, elementum ac, egestas 
    pellentesque, facilisis non, 
    turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit 
    condimentum.</p>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Nunc neque. In hac habitasse 
    platea dictumst. Pellentesque ultrices. Donec nunc metus, 
    aliquam sit amet, aliquam in, 
    luctus ac, odio. Aenean orci velit, elementum ac, egestas 
    pellentesque, facilisis non, 
    turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit 
    condimentum.</p>
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    Nunc neque. In hac habitasse 
    platea dictumst. Pellentesque ultrices. Donec nunc metus, 
    aliquam sit amet, aliquam in, 
    luctus ac, odio. Aenean orci velit, elementum ac, egestas 
    pellentesque, facilisis non, 
    turpis. Quisque dolor. Vestibulum in massa in lectus hendrerit 
    condimentum.</p>
</body>
</html>

Svojstvo pozadinske kartice

Kao što možete vidjeti u gornjim primjerima, postoje mnoga svojstva koja treba uzeti u obzir pri postavljanju pozadine. Takođe je moguće specifikovati sva ova svojstva u jednom jedinom svojstvu kako biste skratili kod ili izbjegli dodatno tipkanje. To se naziva svojstvom skraćenja. Svojstvo pozadine je svojstvo skraćenja za postavljanje svih pojedinačnih svojstava pozadine, tj. background-color, background-image, background-repeat, background-attachment i background-position odjednom. Pogledajmo kako to funkcioniše: 

body {
    background-color: #f0e68c;
    background-image: url("images/smiley.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 250px 25px;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS pojedinačnih svojstava pozadine</title>
<style>  
  body {
    background-color: #f0e68c;
    background-image: url("/examples/images/smiley.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 250px 25px;
  }
</style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Volim da učim CSS3 uz IT TUTORIJALE.</p>
</body>
</html>

Korištenjem skraćenice, gornji primjer se može napisati kao: 

body {
    background: #f0e68c url("images/smiley.png") no-repeat fixed 250px 25px;
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS pozadinskog stenografskog svojstva</title>
<style>  
  body {
    background: #f0e68c url("/examples/images/smiley.png") no-repeat fixed 250px 25px;
  }
</style>
</head>
<body>
    <h1>IT TUTORIJALI</h1>
    <p>Volim da učim CSS3 uz IT TUTORIJALE.</p>
</body>
</html>

Kada koristite svojstvo pozadinske kratice, redosljed vrijednosti svojstava trebao bi biti: 

background: color image repeat attachment position;

Ako vrijednost za pojedinačno pozadinsko svojstvo nedostaje ili nije navedena tokom korištenja notacije skraćenja, koristiće zadanu vrijednost za to svojstvo, ako postoji.