HTML Image Map b2s1 Ek4 Ek 6 Ek5 b8s1 b1s1  Ek7 Nitelikler b5s1.htm Ek2 b3s1 Ek3 b7s1 Ek7 Elementler Ek1 b4s1 b6s1  Ek7 Catalogue index previous next

Katlı Stil Sayfaları (Sürüm 3)

Arka Plan (Background)

Sayfa 1 / 3


 

Arka Plan Tanımı

 

Arka plan, bir elementin görüntülenmek üzere hesaplandığı (render edildiği) alandır. Bu alan bir renk veya bir resim olacak şekilde belirtilebilir. CSS3 kutu modeli düşünülünce, arka plan içerik (content), gezinme yolu (padding) ve sınır çizgisi (border) kutularını kapsar. Marj alanı daima saydam olduğundan, ana/baba elementin arka plan rengi marj alanından daima görülür.

Arka plan rengi kalıtımla geçmez. Buna rağmen, arka plan başlangıç rengi daima saydam olduğundan, arka plan renginin açıkça belirtilmediği durumlarda, ana/baba elementin arka plan rengi alanı kaplar.

Kök elementin arka plan rengi tüm kanaviçeyi kaplar. Eğer tüm sayfanın arka planı hedeflenmek istenirse, <body> elementinin arka plan özelliğininin belirlenmesinin daha uygun olacağı belirtilmiştir.

 

Arka Plan Özellikleri

 

Arka Plan Rengi 'background-color' Özelliği (IE 6.02 SP2 bu özelliği desteklemektedir)

 

Bu özellik, bir elementin arka plan rengini belirler.

Arka plan rengi ('background-color') özelliği aşağıda verildiği gibi tanımlanmıştır:

 

İsim:'background-color'

Değer: <renk>| inherit

Başlangıç Değeri: transparent

Uygulanabilecek Elementler: tüm elementler

Kalıtım: hayır

Yüzde: belirtilmemiştir.

Medya: görsel (visual)

Örnek:

 

(IE 6 SP2 'background-color' özelliğini desteklemektedir)

 

Arka Plan Resmi 'background-image' Özelliği(IE 6.02 SP2 bu özelliği desteklemektedir)

 

Bu özellik, bir elementin arka plan resmini belirler. Bir arka plan resmi belirtilirken, resmin bulunamaması halinde kullanılmak üzere, bir de arka plan renginin belirtilmesi sağlık verilmektedir. Eğer arka plan resmi bulunursa, öncelikli olarak arka planı resim kapsayacaktır. Arka plan resminin saydam olan kısmından arka plan rengi de görülecektir.

Arka plan resmi ('background-image') özelliği aşağıda verildiği gibi tanımlanmıştır:

 

İsim:'background-image'

Değer: <uri>| none | inherit

Başlangıç Değeri: none

Uygulanabilecek Elementler: tüm elementler

Kalıtım: hayır

Yüzde: belirtilmemiştir.

Medya: görsel (visual)

 

Örnek:

 

 

Background-image özelliği tüm güncel belge çözümleyicilerce desteklenmektedir. Bu özelliğin uygulandığı bir örnek background-image.htm dosyasında incelenebilir.

(IE6 SP2 'background-image' özelliğini desteklemektedir)

 

Arka Plan Tekrarı 'background-repeat' Özelliği (IE 6.02 SP2 bu özelliği desteklemektedir)

 

Bu özellik, bir elementin arka plan resmininin tekrar etme (duvar tuğlası oluşturma) yöntemini belirler. Duvar tuğlası oluşumu, background-image.htm örneğinde dikkatleri çekmiş olmalıdır. Burada, olayın daha sistematik şekilde ele alınışı yapılmaktadır. Duvar tuğlası, arka plan içerik (content), gezinme yolu (padding) ve sınır çizgisi (border) kutularını kapsar.

Arka plan resmi tekrarı ('background-repeat') özelliği aşağıda belirtildiği gibi tanımlanmıştır:

 

İsim:'background-repeat'

Değer: repeat | repeat-x | repeat-y | no-repeat | inherit

Başlangıç Değeri: repeat

Uygulanabilecek Elementler:tüm elementler

Kalıtım:hayır

Yüzde: belirtilmemiştir.

Medya:görsel (visual)

Değerier,

repeat

Resim yatay ve düşey olarak tekrarlanır.

repeat-x

Resim sadece yatay olarak tekrarlanır.

repeat-y

Resim sadece düşey olarak tekrarlanır.

no-repeat

Resim tekrarlanmaz, sadece bir kopyası görüntülenir.

 

Örnek:

 

 

Background-repeat özelliği tüm güncel belge çözümleyicilerce desteklenmektedir. Bu özelliğin uygulandığı bir örnek, background-repeat.htm dosyasında incelenebilir. Bu dosyada, arka plan resim tekrarı için değişik değerlerin uygulanarak sonuçların incelenmesi yapılmalıdır.

Arka plan resminin seçimi, arka plan görüntüsünde önemli rol oynar. Arka plan resminin büyüklüğü, sadece belirtildiği elementinin oluşturduğu kutu alanını kapsayacak büyüklükte ise, resim tekrarı olmaz. Eğer sadece, yatay koordinat ekseninde tekrar için yer varsa, resim yatay eksende kutu sınırına ulaşana kadar tekrar edecek şekilde görüntülenir. Örnek olarak dar ve uzun bir resim dar bir alan olan tek satırlı bir paragraf arka planını görüntülemek için kullanılırsa, üstten sadece bir kısmı görüntülecek şekilde tüm satırı kapsayacak şekilde tekrarlanır ve sonuçta çok kötü bir görüntü elde edilmiş olur. Bu konuda, önce ne istendiği iyi planlanmalı, sonra bu isteği karşılyacak şekilde bir resim oluşturmalı ve en sonra CSS adımları ile istenilen görüntüyü sağlayacak kurallar oluşturulmalıdır.

İlginç bir uygulama örneği, background-repeat ve ileride incelenecek background-position özelliklerinden yararlanılarak sayfanın ortasında görüntülenecek bir resim bandı oluşturulmasıdır. Bu örneğin, program metni aşağıda, uygulaması background-position1.htm dosyasında görülebilir.

 

 

Gerçekten de güzel bir görüntü oluşturulabiliyor.

(IE 6 .02 SP2 'background-repeat' özelliğini desteklemektedir

 

Arka plan Eklentisi 'background-attachment' Özelliği (IE 6.02 SP2 de sınırlı olarak desteklemektedir)

 

Bir elemente, arka plan resmi iliştirildiğinde, bu resim ya geçerli görüntü alanında sabit (fixed) veya element ile birlikte hareket eden (scroll) karakterde olabilir.

Arka plan eklentisi ('background-attachment') özelliği aşağıda verildiği gibi tanımlanmıştır:

 

İsim:'background-attachment'

Değer: scroll | fixed | inherit

Başlangıç Değeri: scroll

Uygulanabilecek Elementler: tüm elementler

Kalıtım: hayır

Yüzde: belirtilmemiştir.

Medya: görsel (visual)

 

Örnek:

 

 

Background-attachment özelliği tüm güncel belge çözümleyicilerce desteklenmektedir. Bu özelliğin uygulandığı yukarıdaki örnek, background-attachment.htm dosyasında incelenebilir.

Örnek dosyasının görüntüsü incelendiğinde, sayfanın içeriği kayabilmekte, fakat arka plan resmi sabit kalmaktadır. Eğer, arka plan resminin ilişiklik şekli, "scroll" olacak şekilde düzenlenmiş olsaydı, resim de içerikle birlikte kayabilmektedir..

Bu özelliğe verilen destek, IE için sadece <html> ve <body> elementleri ile sınırlı kalmaktadır. Bu nedenle, sayfa programcılarının bu özelliği sadece <body> elementi ile kullanmalarında yarar bulunmaktadır.

Aslında, başta <div> olmak üzere <blockquote> <cite> gibi elementler için çok yararlı olan bu özelliğin IE de bu derece kötü desteklenmesi, CSS3 spesifikasyonun da bu zayıf desteği kabullenmiş görünmesi hiç de hoş değildir. Örnek olarak Firefox bu özelliği en azından <div> düzeyinde de desteklemektedir. Fakat, IE nin geniş kullanıcı sayısı, IE de desteklenmeyen hiç bir özelliğin bugün için genel kullanımına olanak vermemektedir.

(IE 6.02 SP2 'background-attachment' özelliğini sadece <html> ve <body> elementleri ile sınırlı olarak desteklemektedir)

Thursday, October 6, 2005 20:09

validate in W3C !