[David Wenham]

HTML ile ilk uğraştığım zamanlar bir türlü elde edemediğim bazı arkaplan etkilerini CSS de çok kolaylıkla yapabileceğimi ilk keşfettiğim anda nasıl sevindiğimi aradan geçen yllara rağmen hala dün gibi hatırlarım. Bugün benim için çok basit ayrıntı olan bazı uygulamalar, bir çok insan için aşılması mümkün olmayan problemler olabilir. Ya da şu an benim inanılmaz karmaşık ve zorlayıcı gördüğüm bazı problemler, o problemin çözümünü bilen insanlar için aslında problem dahi kabul edilmeyecek derecede basit uygulamalar olabilir. Bu noktadan hareketle ben de bir zamanlar içinden çıkamadığım arkaplan uygulamalarının CSS'nin sihirli değneği ile aslında ne kadar kolay ve etkili çözümler üretebileceğini anlatmaya çalışacağım;

background-color:web sayfanızın, tablonuzun, satırınızın, ya da hücrelerinizin arka plan rengini değiştirebileceğiniz CSS parametresidir. Kullanımı

background-color:#ff3366;

şeklindedir. Burada kullanılan renk kodlarını hangi mantığa dayandığı hakkında ayrı bir makale yazılabilir..

background-image: Arka planı zenginleştirmek için kullanacağını resim/fotoğraf gibi nesnelerin yolunu belirlemeniz için kullanacağınız parametrelerdir. Ek parametrelerle detaylı bir şekilde özelleştirebilirsiniz. En altta bununla ilgili tek satırlık bir CSS kodu açıklaması yapacağım.. Kullanımı;

background-image:url(klasor_adi/foto.jpg);

background-position: Parametrenin uygulandığı çerçeve içerisinde yer alan nesnelerin x ve y eksenindeki pozisyonunu ayarlamamıza yarar. Kullanımı:

background-position:top;
background-position:bottom;
background-position:center;
background-position:left;
background-position:right;
background-position:inherit;

background-repeat: Arkaplanı zenginleştirmek için kullandığınız image nesnesinin X ve Y ekseninde tekrar sayısını kontrol edebileceğiniz parametredir. Bu şekilde arkaplana koymayı düşündüğünüz imajı x ekseninde ya da Y eksenin tekrarlatabilir, ya da tekrar etmemesini sağlayabilirsiniz. Kullanımı;

background-repeat:repeat-x;
background-repeat:repeat-y;
background-repeat:no-repeat;
background-repeat:repeat;
background-repeat:inherit;

background-attachment: Bu parametre ile arkaplan resminin sayfayla beraber kayıp kaymayacağını belirliyoruz. Eğer bu özelliğe scroll değerini verirsek, sayfamızla beraber arkaplan resmi de scrollbar ile beraber kayar. Eğer fixed değerini verirsek arkaplan resminin konumu scrollbara göre değişmez, sabit kalır. Kullanımı;

background-attachment:scroll;
background-attachment:fixed;

ÜSttekileri yazdıktan sonra bu parametrelerin tümünü birden tek bir background parametresinde kullanma
şeklini de gösterelim.

background:url(klasor_adi/image.gif) 15px 8px repeat #444444;
ya da

background:url(klasor_adi/image.gif) bottom left repeat #444444;


Burada önce url() ile image.gif 'in kaynak yolunu belirttik, araya bir karakterlik boşluk(space) bırakıp image.gif nesnesinin X Sıfır noktasına uzaklığını piksel cinsinden belirttik. Yani sol-üst köşeden 15px lik bir sağa kayma olsun istedik. Hemen ardından da 8px yazarak Y Sıfır noktasından 8 piksellik pozisyon belirlemesi yaptık. Böylece arkaplan için seçtiğimiz image.gif 8 piksel aşağı itilmiş oldu. Akabinde yazdığımız no-repeat parametresi ile de image.gif in tekrar etmemesini, yani bir sefer gösterimi yapıldıktan sonra tekrar gösterimi yapılmamasını istedik. Son olarak yazdığımız #444444 ile de arkaplan rengimizi belirledik.. Alttaki örnekte ise image.gif i bottom-left, yani dip-sol pozisyonunda yerleştirdik.

Bu parametreleri kullanarak yapacağınız varyasyonlarla pek çok kaliteli CSS sitesinde gördüğünüz görsel kaliteyi yakalamanız mümkündür. Örneğin;

BODY { background: url(logonuz.gif) top right;
       background-attachment: fixed }

şeklinde bir kodla logonuz devamlı sayfanızın sağ üst köşesinde kalacaktır. Sayfayı aşağı kaydırsanız bile..

Vakit bulabilirsem her kod için örnek siteler eklemeye çalışacağım.

Umarım birilerinin işine yarar, kolay gelsin..

[alp3r]

Evet, CSS gerçekten çok büyük bir adım bu tür görsel fonksiyonlar için. Fakat şahsen ben, bazı uygulamalarda internet Explorer - mozilla Firefox çatışması arasında kalıyorum. Örneğin arkaplanı ortalayıp, dikey olarak tekrarlatırken i.Explorer hiç bir tepki vermiyor (Arkaplan yok), fakat firefoxta sorun yok, istediğimi veriyor.
Diğerlerini pek hatırlamıyorum, ama bunun gibi sıkıntılar yaşanabiliyor. Bunları engellemek adına ne yapılabilir?

[MGoktas]

Ben de yeni başladım. Sağdan soldan CSS nedir ne değildir neler yapılabilir araştırıyorum.
Bu bilgiler de faydalı. Elinize sağlık.

[Ceyhun Aksan]

background-color

Burada ve burada renk kullanımları ile ilgili bir yazı yayınlamıştım.

Örneğin;

black, yine aynı şekilde ifade edilebileceği gibi, #000000, rgb(0%,0%,0%), rgb(0,0,0) ve #000 biçimlerinde de ifade edilebilir.

Ad: color: aqua;
Hex.: color: #00ffff;
Oransal RGB: color: rgb(0%,100%,100%);
Sayısal RGB: color: rgb(0,255,255);
Kısa Hex: color: #0ff;

gibi...
-----------------------

background-image

Yazım kuralı olarak background-image:url(klasor_adi/foto.jpg); olduğu giib background-image:url('klasor_adi/foto.jpg');, background:url('./klasor_adi/foto.jpg'); vs. gibi şekillerde de yazılabilir.
-----------------------

background-position

%, px gibi sayısal değerlerin verilebileceği gibi yön değerleri de verilebilmektedir.

background-position: 0 0 olabileceği gibi, background-position: 10% 20%, background-position: 5px -25px, background-position: left top
-----------------------

Eline sağlık, güzel bir yazı olmuş.

[fatihcaylak]

Özellikle de yeni başlayanlar açısından başucu kaynağı olarak nitelendirilecek kadar güzel bir makale.. Teşekkür ederim. Yazılarını ve blog'unu severek takip ediyorum.

[mcgoxel]

güzel uygulama teşekkürler.

[modifiyeci]

İyi bi yazı olmuş. teşekkür ederim. Bir sorum olacak
CSS ile bir input[text] e bg-img verdiğimde i.e da düzgün olarak görüntüleniyor. fakat ff'ta arka plan resmini sayfanın 0,0 koordinatına hizalıyor. Yani eğer repeat verilmediyse ve kutu sayfanın 0,0 koordinatında değilse içi boş görünüyor. repeat özelliği verdiğimde isearka planın inputa göre hizalanmadığını görüyorum.
bi resim daha açıklayıcı olacaktır...
http://img121.imagevenue.com/img.php...c_122_56lo.jpg
bunu nasıl çözebiliriz arkadaşlar?

[David Wenham]

modifiyeci tarafından gönderilen mesaj:

İyi bi yazı olmuş. teşekkür ederim. Bir sorum olacak
CSS ile bir input[text] e bg-img verdiğimde i.e da düzgün olarak görüntüleniyor. fakat ff'ta arka plan resmini sayfanın 0,0 koordinatına hizalıyor. Yani eğer repeat verilmediyse ve kutu sayfanın 0,0 koordinatında değilse içi boş görünüyor. repeat özelliği verdiğimde isearka planın inputa göre hizalanmadığını görüyorum.
bi resim daha açıklayıcı olacaktır...
http://img121.imagevenue.com/img.php...c_122_56lo.jpg
bunu nasıl çözebiliriz arkadaşlar?

Sanırım "background:url(image.gif) bottom repeat-x" dersen olacak gibi. Böylece alta yaslı şekilde tekrar edecektir. Ben bunun yerine zaten değişken omlayan bir boyuta sahip text alanlarına, ilgili text alanı boyutunda bir gif hazırlayıp onu arkaplan yapıyorum. Böylece daha spesifik etkiler de elde edebiliyorum. Yani demem odur ki; ille de repeat ettirmeye gerek yok; 150px X 20px lik bir text alanına 160x X 30 px lik bir arkaplan GIF i oluşturulur ve "fixed no-repeat" yapılırsa güzel sonuçlar elde edilebilinir.

[modifiyeci]

Teşekkürler David Wenham ama benim bunu kullandığım yer tam olarak sabit değil. Yani <center> ile sayfaya ortlanmış bir sütunda bulunuyor. Onun için 0*0 dan hizalandığında inputun altını doldurabilecek şekilde bi gif yapılamaz. Sonuçta arka plan olarak koyduğumuz şeyi INPUT un değil SAYFANIN 0*0 ından başlayarak döşüyor. Sitede yeniyim, link vermek yasak mı bilmiyorum ama eğer yasaksa da bu seferlik affola . http://www.araclist.com adresinde Firefox ile girdiğinde sol üstteki inputta bu olayı gözlemleyebilirsin. Yardımlarınızı bekliyorum...

[David Wenham]

modifiyeci tarafından gönderilen mesaj:

Teşekkürler David Wenham ama benim bunu kullandığım yer tam olarak sabit değil. Yani <center> ile sayfaya ortlanmış bir sütunda bulunuyor. Onun için 0*0 dan hizalandığında inputun altını doldurabilecek şekilde bi gif yapılamaz. Sonuçta arka plan olarak koyduğumuz şeyi INPUT un değil SAYFANIN 0*0 ından başlayarak döşüyor. Sitede yeniyim, link vermek yasak mı bilmiyorum ama eğer yasaksa da bu seferlik affola . http://www.araclist.com adresinde Firefox ile girdiğinde sol üstteki inputta bu olayı gözlemleyebilirsin. Yardımlarınızı bekliyorum...

Eğer arkaplan gif ini input a koyuyorsan, o resmi INPUT un 0,0 koordinatlarına koyacaktır, sayfanın değil. Bir deneme yapalım. ilgili input'un arkaplanı için herhangi bir arka plan resmi hazırla.. Mesela boyutları da 250x30px olsun. PS de bu boyutlarda bir alan aç. Ve yeni bir layer yaratıp içini #444444; renk koduyla doldur. Sonra da o layera Layer/Layer Style/InnerShadow uygula.. Ben yaptığım gif i ekledim aşağıda.. Ve şu kodu da input un içine yerleştir

<input type="..." name="..." style="color:#fc0; background:url(bg_text.gif) top left no-repeat #444" />

Bakalım istediğin şey olacak mı. Şu an biraz acelem var, yoksa uygulanmış halini de yollardım. Eğer bu da çalışmıyorsa farklı şeylerden bahsediyoruz demektir