CSS ile Background - İsmail Kırbaş İle Web Sitesi Tasarımı

CSS ile Background - İsmail Kırbaş İle Web Sitesi Tasarımı

CSS ile Background
CSS ile Background Ozellikleri
BODY
{ background: white url(http://www.ceviz.net/images/syl.jpg) }
BLOCKQUOTE { background: #ffcc66 }
P
{ background: url(../images/zemin.gif) #f5f5f5 fixed }
TABLE
{ background: #0c0 url(arkaplan.png) no-repeat bottom right }
Background dendiginde akla hemen sitemizin zeminini olusturan alan gelir ama background ozelligini sadece
zeminde kullanmayiz, mesela su alanlarda da backgorund ile sayfamizi sekillendirebiliriz.
Peki bu backgorundun ozellikleri nelerdir bunlarla neler yapabilir, backgroundumuzu nasil sekillendirebiliriz?
Bunun 5 temel metodu var.
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
Background-Color
Background-color ile zemine bir renk atariz. bu renk rgb, hex, renk ismi ya da transparan olabilir. Kullanimi
su sekildedir;
Sayfa.bg1 { background-color: #000000; color: #FFFFFF;
/*zemin rengi siyah, text rengi beyaz */ }
Background-image
Background-image ise iki deger alabilir: None ya da bir imajin url'i.
Orenegin;
Sayfa.bg2 { background-image: url(images/bgresim.gif) }
Background-repeat
Repeat icin gecerli degerler repeat, repeat-x, repeat-y, ve no-repeat olmak uzere 4 adettir. Peki nedir
repeat ve ne yapar bu 4 metoduyla. Repeat backgroundaki imajinizi sabit tutar ya da saga sola, asagi yukari
tekrar ederek kaymasini ya da kaymamasini saglar. Genellikle no-repeat ozelligi icin kullanilsada belki bir
1/3
yerlerde diger ozelliklerini bilmekte isinize yarayabilir.
•
•
•
•
a) Repeat: Backgroundunuzun yatay ve dikey kaymasini saglar.
b) Repeat-x: Backgroundunuzun dikey kaymasini saglar.
c) Repeat-y: Backgroundunuzun yatay kaymasini saglar.
d) No-repeat: Backgroundunuzun kaymamasini saglar.
BODY { background: url(bgresim.gif);
background-attachment: fixed }
TD.bg1 { background-position: bottom right }
TD.bg1 { background-position: 100% 100% }
Bazen bir imajin sabit olarak backgroundda kalmasini isteriz iste no-repeat bunu saglar.
Background-attachment
Iki deger alir. Scroll ve fixed. Kullanimi asagidaki gibidir.
Background-attachment ozelligi isteginize gore background imajinizin kaymasini veya calisma alanini
kaplamasini saglar.
Background-position
Bu ozellik ile backgroundunuzu dilediginiz gibi yerlestirme imkanina sahip olursunuz. Alacagi
degerler length, percentage, top, center, bottom, left, right seklindedir.
Ornekle aciklamak gerekirse, mesela bir tablomuz olsun ve bunun bir hucresine background imaji
yerlestirmek istiyoruz ama imaj kucuk biz yinede bu imaji koyacagiz. Alt sag koseye yaslamak
istiyoruz imaji o zaman su sekilde yapacagiz;
veya soylede yapabiliriz
Bu konuyu biraz daha detayli aciklamak gerekirse sunlari ekleyebiliriz. background-position ozelligi
arkaplan resmi icin baslangic pozisyonunu belirler. Bu ozellik sadece blok seviye elemanlarina
(block level elements) ve degistirilmis elemanlara uygulanabilir. (HTML degistirilmis elemanlari IMG,
INPUT, TEXTAREA, SELECT ve OBJECT'i kapsar)
Arkaplan pozisyonunu atamanin en kolay yolu asagidaki anahtar kelimeler iledir :
Yatay pozisyon ayarlamak icin (left,center,right)
Dikey pozisyon ayarlamak icin (top,center,bottom)
Arkaplan resminin pozisyonunu ayarlamak icin ayni zamanda yuzdeler ve uzunluklarda kullanlabilir. Yuzde
cinsinden uzunluklar elemanin boyutuna gore gorecelidir. Uzunluklara izin veriliyor olmasina ramen farkli
ekran cozunurluklerindeki isleyis zayifliklarindan oturu kullanimlari pek onerilmez.
Yuzdeleri veya uzunluklar kullanirken, yatay konum once belirtilir, ve daha sonrada dikey konum belirlenir.
20% 65% gibi bir deger 20% yatay 65% dikey bir konum anlamina gelir. Benzer bi sekilde 5px 10px gibi bir
deger 5 piksel saga 10 piksel asagi bir konum belirtmektedir.
Eger sadece yatay konum icin deger verilirse, dikey konum icin deger varsayilan olarak %50 olarak verilir.
Piksel cinsinden uzunluk ve yuzde degerlerin kombinasyonuna izin verilmektedir. Yine de, yuzde degerler ve
piksel cinsinden degerler anahtar kelimeler ile birlestirilemezler.
Anahtar kelimeler asagidaki gibi yorumlanirlar :
* top left = left top = 0% 0%
* top = top center = center top = 50% 0%
* right top = top right = 100% 0%
* left = left center = center left = 0% 50%
* center = center center = 50% 50%
* right = right center = center right = 100% 50%
2/3
* bottom left = left bottom = 0% 100%
* bottom = bottom center = center bottom = 50% 100%
* bottom right = right bottom = 100% 100%
Tasarim sirasinda ayrica kisa yazima sahip olan 'background' ozelligi de kullanilabilir ki bu ozellik
background-position ozelligine gore daha iyi desteklenmektedir.
Kaynak Site: Ismail KIRBAS ile Web Sitesi Tasarimi http://www.kirbas.com
Belge Adresi: www.kirbas.com/index.php?id=118
3/3