CSS Arkaplan Özellikleri Nelerdir ve Nasıl Uygulanır?
CSS arkaplan özellikleri (Bacground) sayfamızın ya da HTML içinde kullandığımız etiketlerin arkaplanlarına stil atamaları yapmamızı sağlayan CSS özellikleridir. Şimdi CSS arkaplan özellikleri alt başlıklarını tek tek inceleyelim.
Arkaplan Rengi (background-color)
Elemanların arkalanına bir renk atamak için kullanılır.
Yapısı: background-color: <deger>
Aldığı Değerler: renk | transparent | inherit
Başlangıç Değeri: transparent
Uygulanabilen elemanlar: Tüm elemanlar
Kalıtsallık: Yok
p
{
background-color:red;
}
transparent değeri elemanın arkalanının görünmesi için kullanılır.
Arkaplan Resmi (background-image)
Elemanların artalanına resim eklemek için kullanılır.
Yapısı: background-image: <deger>
Aldığı Değerler: url | none |inherit
Başlangıç Değeri: none
Uygulanabilen elemanlar: Tüm elemanlar
Kalıtsallık: Yok
p
{
background-image: url('resim.png');
}
Arkaplan Resim Tekrarı (background-repeat)
background-repeat özelliği background-image ile arkalana eklenen resmin tekrarı ile özellikleri belirler.
Yapısı: background-image: <deger>
Aldığı Değerler: repeat | repeat-x | repeat-y | no-repeat
Başlangıç Değeri: repeat
Uygulanabilen elemanlar: Tüm elemanlar
Kalıtsallık: Yok
p
{
background-image: repeat-x;
}
repeat [yinele]: Resim hem yatayda hem de düşeyde yinelenir.
repeat-x: Resim sadece yatay olarak yinelenir.
repeat-y: Resim sadece düşey olarak yinelenir.
no-repeat [yineleme]: Resim yinelenmez; resmin sadece bir kopyası oluşturulur.
Safari 2 ve alt sürümlerinde bu özellikle ilgili bazı sorunlar vardır:
bacground-repeat değeri no-repeat olarak atanmış olan artalan resimleri tekrarlamaması gerekirken tekrar yapar.
Arkaplan Resim Bağlılığı (background-attachment)
background-attachment özelliği arkalana eklenen resmin sayfa ile kaymasını (scroll) veya sayfanın arkalanına çakılı (fixed) kalmasını sağlar.
Yapısı: background-attachment: <deger>
Aldığı Değerler: scroll | fixed | inherit
Başlangıç Değeri: scroll
Uygulanabilen elemanlar: Tüm elemanlar
Kalıtsallık: Yok
p
{
background-attachment: scroll;
}
Arkaplan Resmi Konumu (background-position)
background-position özelliği background-image ile belirlenen resmin başlangıç noktasını belirler. Bu özellik sadece blok seviyeli ve yerleştirilen (Bu elemanlar kendine özgü boyutları olan elemanlar olarak tanımlanabilir. Örnek; img, input, textarea, select, ve object) elemanlara uygulanır.
Yapısı: background-position: <deger>
Aldığı Değerler: [<percentage> | <length>] {1,2} | [top | center | bottom] || [left | center | right]
Başlangıç Değeri: 0% 0%
Uygulanabilen elemanlar: Blok seviyeli ve yerleştirilen elemanlar
Kalıtsallık: Yok
p
{
background-position: center;
}
En kolay kullanım sekli;
Yatay değerler için: left, center, right
Dikey değerler için: top, center, bottom
Yüzde değerleri ve uzunluk değerleri de kullanılır. Yüzde değerleri elemanın boyutuna bağlı olarak görecelidir. Uzunluk değerleri de kullanılabilir. Ancak farklı ekran çözünürlüklerinde farklı görüntülere sebebiyet vermesi nedeni ile pek tavsiye edilmez. Yüzde değerler ve uzunluk değerleri verildiğinde ilk değer yatay içindir sonra gelen dikey değerdir. Örneğin %10 %60 değeri bir artalan resmi için verilmiş ise %10 değeri yataydaki değeri %60 ise dikey olarak değerini gösterir. 5px 10px gibi değerler verilmiş ise resmin sol üstten 5px sağa ve 10px aşağıdan başlayacağını belirler. Eğer yalnızca yatay değer verilmiş ise, dikey değer %50 olarak kabul edilecektir. Yüzde değerler ve uzunluk değerleri eksi değerler alabilir. Örnek; -2px %10 gibi.
CSS Arkaplan (background)
Bu özellik arkaplan (background) ile ilgili tüm özelliklerin bir arada kullanımı sağlar.
Yapısı: background: <deger>
Aldığı Değerler: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
Başlangıç Değeri: Tanımsız
Uygulanabilen elemanlar: Tüm elemanlar
Kalıtsallık: Yok
p
{
background: url('resim.png') repeat-x scroll;
}
CSS arkaplan özellikleri konusunu gördük. Konu ile ilgili soru, öneri ya da fikirlerinizi aşağıda bulunan yorumlar kısmına yazarak bize iletebilirsiniz. CSS ile ilgili konuları aşağıdaki linke tıklayarak CSS kategorisi altındaki başlıklardan öğrenebilirsiniz. Ayrıca aşağıdaki Instagram ve Twitter logolarına tıklayarak bizi Instagram ve Twitter üzerinde de takip edebilirsiniz.
https://yazilimdelisi.com/category/web-gelistirme/css/
Sosyal Medya Hesaplarımız
