Top

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…

Siz neler düşünüyorsunuz? Yazımızı beğendiyseniz aşağıdaki butonlardan tavsiye edebilirsiniz, paylaşabilirsiniz veya yorumlarınızı sunabilirsiniz. Teşekkürler okuduğunuz için!

Bir önceki yazımız olan CSS Dersleri Bölüm 2 - ID ve Class ile CSS kullanımı başlıklı makalemizde class, css ve element hakkında bilgiler verilmektedir. Daha fazla yazımızı görmek için HYTürkyılmaz Dijital pazarlama ve growth hacking blogu anasayfası'yı ziyaret edebilirsiniz. Yazımızı aşağıdaki paylaşım butonlarıyla paylaşarak sevginizi yayınız! Teşekkürler!

Hasan Yasin Türkyılmaz

Sosyolog, dijital stratejist. Dijital medya, reklam ve growth hacking eğitimleri ve hizmetleri sunarım. PC, konsol fark etmez. Oyun oynamayı severim.

Tüm yazıları - Websitesi

Beni takip edin!:
TwitterFacebookLinkedInPinterestGoogle PlusDiggFlickrStumbleUponYouTubeYelpRedditDelicious