CSS Dersleri Bölüm 3 – Arkaplanların stillendirilmesi
CSS Arkaplan
CSS arkaplan özellikleri bir elementin arkaplan efektlerini tanımlamak için kullanılır.
Arkaplan efektleri için css özellikleri;
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Arkaplan rengi
background-color özelliği bir elementin arkaplanını değiştirmek için kulanılır.
body seçicisi ile sayfanın arkaplanını değiştiririz. Misal;
body {background-color:#b0c4de;}CSS ile; renk değiştirebilmek için değerleri,
- Hexadecimal kodları ile
- RGB kodları ile
- Rengin İngilizce ismi ile girebiliriz.
Bunun üzerinde sonra tekrar duracağım.
Arkaplan resmi
background-image özelliği bir elementin arkaplan resmini değiştirmeye ya da oluşturmaya yarar.
Varsayılan olarak resim tekrar eder ve böylece tüm sayfayı kaplar.
Bir sayfanın arkaplan resmi şöyle olur;
body {background-image:url('paper.gif');}Arkaplan resmi belirlediğinizde yazıların okunabilir olmasına dikkat edin.
Background Image – Repeat X/Y ( yatay veya dikey tekrar)
Genelde, background-image özelliği hem yatay hem de dikey olarak tekrar eder.
Bazı imajlar ise ya x kordinatında yani yatay ya da y kordinatında yani dikey olarak tekrarlarması gerekebilir, ve yahut tuhaf gözükeceklerdir böyle olmazsa, örneği görmek için tıklayınız. Doğrusu x doğrultusunda tekrar edenidir o örnek için de buraya tıklayınız.
Background Image – Konum ayarlama ve no-repeat
Arkaplan resmi yazınızı okunmaz hale getirmemeli.
Arkaplan tekrarında resmi bir defa kullanmak da background-repeat özelliği ile sağlanır, no-repeat kullanılarak.
Misal;
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}Örnek ve adresi için tıklayınız…
Üstteki yazının okunmasını zorlaştıran bir kullanım.
Background-position ile resimin konumunu uygun bir alana taşıyarak sorunu çözeriz.
Misal;
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}Background – Kısa yazım özelliği
Aşağıdaki örnekte görebileceğiniz gibi background özelliğinin içinde birçok özellik bulunmakta.
Kısa kod, bir özelliğe ait tüm nitelikleri belirtmemize yarar.
Misal;
body {background:#ffffff url('img_tree.png') no-repeat right top;}Fakat bu kullanımın bir sırası vardır.
Bu da;
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
olmayan değerleri girmezsiniz ama sıraya bağlı olarka yazarsınız.
Bu ders geç yayınlandı, stajda olduğum için. İyi çalışmalar…