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

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

by Hasan Yasin Türkyılmaz Ağustos 01, 2011

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…

Bültenime kaydol!

İster soru sor, ister yazılarımdan ve etkinliklerimden haberdar ol...

Hasan Yasin Türkyılmaz

Dijital stratejist, growth hacker, pazarlama ve reklam danışmanı, eğitmen, konuşmacı, yazar @bilgeadam @g4asw @hyturkyilmaz

Related Articles

%d blogcu bunu beğendi: