CSS Dersleri Bölüm 3 – Arkaplanların stillendirilmesi

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…