CSS pozadina i boje
Da se potsetimo, u HTML pozadina može se definisati za celu stranu, zatim u
TABLE, TD i TR tagovima tabela, itd. Pozadina može biti u boji ili u slici. CSS
uvodi još neke nove atribute vezane za pozadinu, a samim tim i još neke
mogućnosti i efekte. Na primer u CSS možemo postaviti pozadinu i u tekstualnoj
liniji. Zapravo CSS može postaviti
pozadinu takoreći gde god želimo, odnosno gde postoji vizuelna mogućnost.
U CSS se pozadine definišu sledećim atributima:
- background-color - boja pozadine. Boja se može zadati slovno na primer crvena boja kao red, u heksadecimalnim zapisu kao u HTML na primer #FFFFFF, a može i u decimalnom formatu rgb(255,255,0).
- background-image - definiše sliku za pozadinu. Putanja slike se zadaje u obliku: "url(putanjadoslike.gif)"
- background-repeat - definiše da li će se slika u pozadini ponavljati. Vrednosti:
- repeat - klasično ispunjava slika površinu pozadine nadovezivanjem dok je ne ispuni,
- no-repeat - definiše da slika ne treba da ispuni celu površinu pozadine ukoliko je ne pokriva svojom veličinom,
- repeat-x - slika se ponavlja samo vodoravno dok ne ipuni u jednoj "liniji" površinu pozadine,
- repeat-y - isto kao sa X samo u ovom slučaju se odnosi na vertikalu.
- background-attachment - definiše kako će se slika u pozadini ponašati pri skrolovanju. Vrednosti: scroll
- prati skrolovanje i, fixed fiksirana i ne prati skrolovanje.
- background-position - definiše poziciju slike. Vrednosti mogu biti kombinacije unapred definisanih reči:
- top left - znači da će se pozadina pojaviti bez ponavljanja samo jednom u gornjem do vrha levom uglu (baš u vrh bez imalo razmaka),
- top center - u gornjem centralnom delu,
- top right - u gornjem desnom delu,
- center left - u centralnom delu po vertikali ali po horizontali u levom delu,
- center center - u centralnom delu ali i u centru po horizontali,
- center right - u centralnom delu ali uz desnu ivicu
- bottom left - u donjem delu skroz i to u levom delu po horizontali,
- bottom center - u donjem delu po vertikali a po horizontali u centru,
- bottom right - u donjem delu po vertikali a u desnom delu po horizontali,
- x% y% - daju se x i y koordinate u procentima od visine i širine ekranske rezolucije ako je upitanju pozadina cele strane, ili procentualno u odnosu na visinu i širinu prostora u koji se smešta pozadina.
- xpos ypos - fiksno se definiše položaj najčešće u pikselima (a može i u mm, cm, pc, ex, itd) po vertikali i horizontali gde će se pozadinska slika pojaviti
Ajde sad da vidimo kako se atributi primenjuju u praksi kroz par primera.
Počnimo od background-color:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<style type="text/css">
#w1 {background-color: #c5def7;}
</style>
</head>
<body id=w1>
<p>Prvi tekst</p>
<p>Drugi tekst</p>
</body></html>
A rezultat će biti pozadina u boji koju definiše heksadecimalni zapis boje
#c5def7.
Ako pak želimo da nam pozadina bude slikovna onda to radimo pomoću sledećeg kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<style type="text/css">
#w2 {
background-image: url(csspozadina.gif);
}
</style>
</head>
<body id=w2>
<p>Prvi tekst</p>
<p>Drugi tekst</p>
</body></html>
E sad ako želimo da nam slika pozadine ne ispunjava celu površinu već samo
onu kolika je i sama slika pišemo sledeći kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<style type="text/css">
#w3 {
background-image: url(csspozadina.gif);
background-repeat: no-repeat;
}
</style>
</head>
<body id=w3>
<p>Prvi tekst</p>
<p>Drugi tekst</p>
</body></html>
A rezultat:
Ovde vidimo da se slika u pozadini pojavila samo jednom bez ponavljanja. To
smo uspeli zbog parametra background-repeat i to zato što je njegova
vrednost no-repeat. Ako je vrednost repeat onda se ponavlja po
celoj površini kao što je to slučaj u čistom HTML-u. A ako stavimo za vrednost
repeat-x prostor će se puniti slikom samo po jednoj horizontali na vrhu
prostora, a ako je repeat-y onda po jednoj vertikali uz levu ivicu
prostora. A u kombinaciji sa background-position možemo odrediti i u koji
tačno deo prostora želimo da ispunimo, itd. Probajte i vežbajte sve mogućnosti.
Naravno za definisanje jednog selektora možemo koristiti više atributa i to u
raznim kombinacijama, ali ne samo recimo bacground atribute već i sve
moguće ako su interesantni za neki efekat. Znači ovde smo atribute podelili u
grupe za pozadinu, za fontove itd ali to samo da bi vi lakše shvatili, ali za
definisanje selektora možemo upotrebljavati sve kombinacije svih mogućih CSS
atributa ako daju odredjene efekte. Upravo to je jedan od razlog koji daje
velike mogućnosti CSS-u za dizajniranje stranica.
Zato ajde da vidimo našta se tačno misli vezano za atribut
background-attachment, a ujedno ajde da vidimo kako to CSS može da umeće
pozadine gde god želimo, što nije bio slučaj sa čistim HTML-om. Primera radi
ajde da umetnemo pozadinu u TEXT AREI:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head>
<style type="text/css">
#w4 {
background-image: url(csspozadina.gif);
background-attachment: fixed;
}
</style>
</head>
<body>
<form>
<textarea rows="6" cols="51" id="w4">
Neki tekstttttttt tttttttt tggggggggggg ggggggg
ggggggggffff ffffffff
fttttttttt ttttttttt tttttttt tggggggggggg ggggggg ggggggggffff
ffffffff fttttttttt ttttttttt tttttttt tggggggggggg ggggggg
ggggggggffff ffffffff fttttttttt ttttttttt ttttttggggggg gffffffff
ffffggggg ggggghhhhh hhhhhh hhhhhhhh hhhhhffff ffffff ffffffttttt
tttttttttttt gfffffffff ffffff ghhhhhhh hhhhhhh hhhhfffff fffffff
ftttttttt nnnnnnnn nnnnnnnnnnnnn nnnnnnnnnnnnnnnnnnn nnnnnnnnnnnnnnnn
nnnnnnnnnnnnnnnn nnnnnnnnn
<
/textarea></form>
</body></html>
A rezultat:
Dakle kad stavimo background-attachment: fixed;
imamo pozadinu koja se iako pomeramo klizač ne pomera jer je fiksirana.
Pomerajte gornji klizač i vdećete
