IZRADA SAJTA za 10 €

Home   FORUM   Toplista   HTML   CSS   JavaScript   PHP   DIZAJN   SEO   Mapa


KONTAKT
izuzetan[at]gmail.com






TOP LISTA SAJTOVA
Igrice
Slike

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:

CSS pozadina slika1

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

 

Copyright © 2010 BUbaj. Powered By bubaj.com
CSS    CSS osnove    CSS stil    CSS box model    CSS display