CSS İLE Background Kullanımı

CSS, Cascading Stylesheet veya Katmanlı Sayfa Sitilleri denen ve HTML’e destek sağlayan stil komutları teknolojisidir. HTML içindeki nesnelere etiketleri ile özellikler ekleyerek onları biçimlendirmenizi sağlar.

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(https://www.safirmedya.com/images/syl.jpg) }
BLOCKQUOTE { background: #ffcc66 }
P    { background: url(https://www.safirmedya.com/../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 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 ise iki değer alabilir: None ya da bir imajın url adresi.

<strong “line-height:1.6em”=””>Background-image

Örneğin;

Sayfa.bg2 { background-image: url(images/bgresim.gif) }

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.

Background-repeat

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 }

TD.bg1 { background-position: bottom right }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: 100% 100% }veya şöylede yapabiliriz

Arkaplan pozisyonunu atamanın en kolay yolu aşağıdaki anahtar kelimeler iledir :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)

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.