Css Background (Arkaplan) Özellikleri

Merhaba arkadaşlar, bu makalemizi geliştirdik. İsterseniz yeni haline buradan erişebilirsiniz.

Css derslerimin bir diğer paylaşımında sizlere css background özelliği hakkında bilmeniz gereken kısımları ve bu özelliğin nasıl kullanıldığını örneklerle anlatacağım.Background’ın kullanım şekli ve özellikleri farklılık gösterdiğinden adım adım tüm özellikleri anlatmanın en doğru yol olacağını düşündüm ve anlatım sırası aşağıdaki gibi olacaktır.

i .  Background-color

ii . Background-image

iii . Background-repeat

iv . Background-position

v . Background-attachment

Css ile background özelliklerine ilk madde olan background-color ile başlıyoruz.

background-color:

Bu özellik sayesinde belirlediğimiz elementlerimize arkaplan rengi atayabiliriz,örnek kullanım aşağıdaki gibidir.

body { background-color:#FF0000; } // Bu kod satırı sayfamızın arkaplan rengini kırmızı olarak belirleyecektir.

Burada renk seçimi farklı şekillerde (rgb,rgba) tanımlanabilir,bu renk seçimleri hakkında ayrıntılı bilgiye buradan ulaşabilirsiniz.

background-image:

Background-image özelliği sayesinde belirlediğimiz elementin arkaplanına istediğimiz resmi ekleyebiliriz,örnek kullanım aşağıdaki gibidir.

body { background-image:url(/images/bg.png); } // Bu kod satırı sayfamızın arkaplan rengine bg.png adlı dosyayı ekleyecektir..

background-repeat

Bu özellik bundan önceki adımda kullandığımız background-image özelliğinde kullandığımız arkaplan resmini konumlandırmak için kullanılır.Örnekle açıklamak gerekirse mesela genişliği 1px uzunluğu 800px olan bir arkaplan rengi belirledik fakat sayfamızın sol üst köşesinde 1 px boyunda 1 alanda sabitlendi,Bu durumda repeat özelliğini kullanarak sayfamızın genişliği boyunca bu 1px genişliğindeki resmi yayabilir ve istediğimiz arkaplana ulaşabiliriz.Kullanım şekli aşağıdaki gibidir.

body { background-image:url(/images/bg.png); background-repeat:repeat-x; } // Bu şekilde bg.png adlı arkaplan resmimizi sayfamızın x koordinatı boyunca tekrarlatırız.

background-repeat farklı şekillerde kullanılabilir,örnekler aşağıdadır.

body { background-image:url(/images/bg.png); background-repeat:repeat; } // Bu şekilde bg.png adlı arkaplan resmimiz sayfamızda standart şekilde tekrarlanır.

body { background-image:url(/images/bg.png); background-repeat:repeat-x; } // Bu şekilde bg.png adlı arkaplan resmimizi sayfamızın x koordinatı boyunca tekrarlatırız.

body { background-image:url(/images/bg.png); background-repeat:repeat-y; } // Bu şekilde bg.png adlı arkaplan resmimizi sayfamızın y koordinatı boyunca tekrarlatırız.

body { background-image:url(/images/bg.png); background-repeat:no-repeat; } // Bu şekilde arkaplan renginin tekrarlanmasını durdurmuş oluruz.

background-position

background-repeat özelliğini sayfamızda arkaplanımızı istediğimiz koordinatta kullanmamıza olanak sağlar,Bunun için aşağıdaki listeye göz atabilirsiniz.

~ left top,left center,left bottom,right top,right center,right bottom,center top,center center,center bottom

Daha ayrıntılı kullanım için buraya bakabilirsiniz.

Örnek kullanım aşağıdaki gibidir,Burda dikkat etmemiz gereken konu kullanacağımız belli boyutlardaki resmi arkaplan olarak ayarlarken no-repeat özelliğini ekliyoruz,çünkü 10px,10px boyutlarındaki bir resim bütün sayfayı tekrar ettiğinde position özelliği tanımlamamızın bir anlamı olmayacaktır.

div
{
background-image:url('bg.png');
background-repeat:no-repeat;
background-position:right top;
}

background-attachment

Bu özellik sayesinde belirlediğimiz arkaplan rengini scroll hareketiyle hareket etmesini yada zeminde çakılı olarak görüntülenmesini sağlayabiliriz,kullanımları ise aşağıdaki gibidir.

background-attachment:fixed;

div
{
background-image:url('bg.png');
background-attachment:fixed;
}

background-attachment:scroll;

div
{
background-image:url('bg.png');
background-attachment:scroll;
}

Ayrıca bu özelliklerin hepsini background satırında birleştirebilir ve aşağıdaki gibi düzenli bir şekilde kullanabiliriz.

background:#FF0000 url(bg.png)no-repeat bottom right;

Daha geniş bilgilere ve örneklerle uygulamalı sonuçlara ulaşmak isterseniz buraya bakabilirsiniz.

Kafanıza takılan bölüm varsa yorum bölümünden veya iletişim sayfasından bana sorabilirsiniz.