CSS ile Background - İsmail Kırbaş İle Web Sitesi Tasarımı
Transkript
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
Benzer belgeler
2009 Yılı Ödeme Takvimi - ALFA KURUMSAL HİZMETLER A.Ş
body{font-family:Arial,sans-serif;font-size:14px;color:#000000;} td{font-size:12px;vertical-align:top} th{font-size:14px;font-weight:bold;text-align:left} h1{display:inline;font-size:18px;font-weig...
Detaylı