Background dendiğinde akla hemen sitemizin zeminini oluşturan alan gelir ama background özelliğini sadece zeminde kullanmayız, mesela şu alanlarda da backgorund ile sayfamızı şekillendirebiliriz.
BODY { background: white url(
http://www.genckolik.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 }
Peki bu backgorundun özellikleri nelerdir bunlarla neler yapabilir, backgroundumuzu nasıl şekillendirebiliriz?
Bunun 5 temel metodu var.
background-color
background-image
background-repeat
background-attachment
background-position
Background-Color
Background-color ile zemine bir renk atarız. bu renk rgb, hex, renk ismi ya da transparan olabilir. Kullanımı şu şekildedir;
Sayfa.bg1 { background-color: #000000; color: #FFFFFF;
/*zemin rengi siyah, text rengi beyaz */ }
Background-image
Background-image ise iki değer alabilir: None ya da bir imajın url'i.
Öreneğin;
Sayfa.bg2 { background-image: url(images/bgresim.gif) }
Background-repeat
Repeat için geçerli değerler repeat, repeat-x, repeat-y, ve no-repeat olmak üzere 4 adettir. Peki nedir repeat ve ne yapar bu 4 metoduyla. Repeat backgroundaki imajınızı sabit tutar ya da sağa sola, aşağı yukarı tekrar ederek kaymasını ya da kaymamasını sağlar. Genellikle no-repeat özelliği için kullanılsada belki bir yerlerde diğer özelliklerini bilmekte işinize yarayabilir.
a) Repeat: Backgroundunuzun yatay ve dikey kaymasını sağlar.
b) Repeat-x: Backgroundunuzun dikey kaymasını sağlar.
c) Repeat-y: Backgroundunuzun yatay kaymasını sağlar.
d) No-repeat: Backgroundunuzun kaymamasını sağlar.
Bazen bir imajın sabit olarak backgroundda kalmasını isteriz işte no-repeat bunu sağlar.
Background-attachment
İki değer alır. Scroll ve fixed. Kullanımı aşağıdaki gibidir.
BODY { background: url(bgresim.gif);
background-attachment: fixed }
Background-attachment özelliği isteğinize göre background imajınızın kaymasını veya çalışma alanını kaplamasını sağlar.
Background-position
Bu özellik ile backgroundunuzu dilediğiniz gibi yerleştirme imkanına sahip olursunuz. Alacağı değerler length, percentage, top, center, bottom, left, right şeklindedir.
Örnekle açıklamak gerekirse, mesela bir tablomuz olsun ve bunun bir hücresine background imajı yerleştirmek istiyoruz ama imaj küçük biz yinede bu imajı koyacağız. Alt sağ köşeye yaslamak istiyoruz imajı o zaman şu şekilde yapacağız;
TD.bg1 { background-position: bottom right }
veya şöylede yapabiliriz
TD.bg1 { background-position: 100% 100% }
Bu konuyu biraz daha detaylı açıklamak gerekirse şunları ekleyebiliriz. background-position özelliği arkaplan resmi için başlangıç pozisyonunu belirler. Bu özellik sadece blok seviye elemanlarına (block level elements) ve değiştirilmiş elemanlara uygulanabilir. (HTML değiştirilmiş elemanları IMG, INPUT, TEXTAREA, SELECT ve OBJECT'i kapsar)
Arkaplan pozisyonunu atamanın en kolay yolu aşağıdaki anahtar kelimeler iledir :
Yatay pozisyon ayarlamak için (left,center,right)
Dikey pozisyon ayarlamak için (top,center,bottom)
Arkaplan resminin pozisyonunu ayarlamak için aynı zamanda yüzdeler ve uzunluklarda kullanlabilir. Yüzde cinsinden uzunluklar elemanın boyutuna göre görecelidir. Uzunluklara izin veriliyor olmasına ramen farklı ekran çözünürlüklerindeki işleyiş zayıflıklarından ötürü kullanımları pek önerilmez.
Yüzdeleri veya uzunluklar kullanırken, yatay konum önce belirtilir, ve daha sonrada dikey konum belirlenir. 20% 65% gibi bir değer 20% yatay 65% dikey bir konum anlamına gelir. Benzer bi şekilde 5px 10px gibi bir değer 5 piksel sağa 10 piksel aşağı bir konum belirtmektedir.
Eğer sadece yatay konum için değer verilirse, dikey konum için değer varsayılan olarak %50 olarak verilir. Piksel cinsinden uzunluk ve yüzde değerlerin kombinasyonuna izin verilmektedir. Yine de, yüzde değerler ve piksel cinsinden değerler anahtar kelimeler ile birleştirilemezler.
Anahtar kelimeler aşağıdaki gibi yorumlanırlar :
* 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%
* bottom left = left bottom = 0% 100%
* bottom = bottom center = center bottom = 50% 100%
* bottom right = right bottom = 100% 100%
Tasarım sırasında ayrıca kısa yazıma sahip olan 'background' özelliği de kullanılabilir ki bu özellik background-position özelliğine göre daha iyi desteklenmektedir.
Normal
