CSS Ders 5 (Arkaplanlar)

CSS arkaplan özellikleri bir HTML nesnesine arkaplan eklemenizde yardımcı olur. Bununla ilgili olarak tanıyacağımız CSS kodları:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background

1. background-color: (Arkaplan Rengi)
   Bir elementin arkaplan rengini belirlememizi sağlar.

   • div { background-color: #EFEFEF; }

     Önizleme :
     
2. background-image: (Arkaplan Resmi)
   Bir element içinde arkaplan resmi kullanmamızı sağlar.

   •  body { background-image: url('resim.jpg'); }

     Önizleme :
     
   Yukarıdaki gibi url('') yazılarak arasında resmin adı veya yolu yazılır. Örnekte resmin adı resim.jpg olarak gösterilmiştir.
3. background-repeat: (Arkaplan Tekrarı / Döşeli)
   Kullandığımız arkaplan resminin tekrar edip etmeyeceğini belirtmemizi sağlar. Dört kullanımı vardır:
   • no-repeat : Tekrar edilmeyecektir
   • repeat : Tekrarlanacaktır / döşenecektir
   • repeat-x : Sadece sağa doğru tekrar edecektir
   • repeat-y : Sadece aşağı doğru tekrar edecektir
   Aşağıdaki kullanım örneğini inceleyelim:

   •  body {
              background-image: url('resim.jpg');
              background-repeat: no-repeat;
           }

     Önizleme :
     
   Yukarıdaki css kodu resmin tekrarlanmayacağını tarayıcıya bildirir.
4. background-attachment: (Arkaplan Sabitliği)
   Bu kod kullandığımız arkaplanın sabit kalıp kalmayacağı hakkında ayar yapmamızı sağlar. Eğer özellik değerinin sabit kalmasını (yani sayfanın yerine göre değişmemesini) istiyorsak fixed özelliği kullanırız.

   •  body {
              background-image: url('resim.jpg');
              background-attachment: fixed;
           }

5. background-position: (Resmin Nereye Hizalanacağı)
   Eğer background-repeat özelliğini no-repeat olarak belirlediysek bu kod yardımıyla onun hizalanma şeklini belirleme şansına sahip oluruz.

   • body {
              background-image: url('resim.jpg');
              background-repeat: no-repeat;
              background-position: right top;
           }

   Yukarıda yer alan kod arkaplan resminin right (sağ) ve top (üst) tarafa doğru hizalanacağını bildirir.
6. background: (Arkaplan Belirlemenin Kısa Yolu)
   Yukarıdaki tüm özellikleri tek bir kodda kullanmanız mümkün. Bunun için kullanacağımız kod: background.

   •  body {
              background: #000000 url('resim.jpg') no-repeat right top;
           }

   Yukarıdaki kodda belirtilenler sırasıyla: background-color, background-image, background-repeat ve background-position.

İlgili Konular

0 Yorum