CSS Arkaplan Özellikleri

Bu dersimizde HTML sayfamız veya sayfamızda yer alan bir bölümün resmini ve arka plan rengini veya özelliklerini nasıl belirleyebiliriz? sorusunun cevabını bulmaya çalışacağız.

HTML nesnesine arka plan eklemenize CSS kodları yardımcı olur. CSS derslerinin bu bölümünde CSS arka plan rengini, resmini ya da özelliklerini nasıl değiştirebileceğimize bakalım:

 

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

 

CSS Renk Kavramı

CSS dosyamızda yer alan belirli renkler vardır ve bu renkleri belirtmek için aşağıdaki kavramları kullanabiliriz:

  • Hex(Onaltılık) Renkler
  • RGB (Kırmızı, Yeşil, Mavi) Renkler
  • Tarayıcı Renk Adları

Hex(Onaltılık) Renkler: #000000 şeklinde yazılan renklerdir. 0-9 ve A-F değerleri alabilen sembollerden meydana gelir. Örneğin #404040 ifadesinin bir renk karşılığı mevcuttur.bir rengi ifade etmektedir. #404040 ifadesi şeklinde yazılan renk kodlarına bir resim işleme yazılımı(photoshop vb.) aracılığı ile ulaşabilirsiniz.

RGB (Kırmızı, Yeşil, Mavi) Renkler: Kırmızı,mavi ve yeşil renklerinin tonları kullanılarak yeni renkler oluşturabilir. Örnek vermek gerekirse rgb(0, 0, 0) ifadesinin karşılığı siyah rengi temsil etmektedir. Örneğin mavi tonda bir renge ihtiyacınız olduğu zaman Red – Green – Blue üçlemesindeki blue değerini artırmanız gerekecektir. Yani rgb(0, 0, 255) mavi renginin karşılığıdır.

Not:  İngilizce olarak belirlenmiş bazı renk isimleri css dosyasına yazılarak renk elde edilebilir.

  • white:beyaz,
  • black:siyah,
  • blue:mavi,
  • green:yeşil

renginin karşılığıdır.

 

Aşağıdaki örnek kodları inceleyerek renk kodlarını daha yakından tanıyalım:

      /* Mavi */
      p { color: #775be8; }

      /* Sarı */
      div { color: yellow; }

      /* Yeşilin Bir Tonu */
      code { color: rgb( 37, 217, 79 ); }

 

background-color: Arkaplan Rengi

Bir elementin arka plan rengini belirlemek için kullanılır.

div { background-color: #d3cfe1; }

 

background-image: Arkaplan Resmi

Bir elemente arka plan resmi eklemek için kullanılır.

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

Yukarıdaki örnekte URL kısmına seçilecek arka plan resminin yolu yazılır. ornekresim.jpg ornek olması açısından yazılmıştır.

 

background-repeat: Arkaplan Tekrarı / Döşeli

Kullanılan arka plan resminin tekrar edip etmeyeceğini ise:

  • no-repeat : Tekrar etmez.
  • repeat : Döşeli şekilde tekrarlanacak.
  • repeat-x : Sağa doğru tekrarlanacak.
  • repeat-y : Aşağı doğru tekrarlanacak.

komutları belirler.

 

Örnek:

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

Yukarıdaki kod bloğu yazıldığı zaman arka plan resmi tekrar etmez.

 

background-attachment: Arkaplan Sabitliği

Bu kod arka planın sabit kalıp kalmayacağı ayarını belirler. Eğer özellik değerinin sabit kalmasını istiyorsak fixed ifadesini kullanabiliriz.

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

 

background-position: Resmin Hizalanacağı Yer

background-repeat özelliğini no-repeat  yaptığımız zaman arka planın hizalanma şeklini belirleyebiliriz.

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

Arka plan resmi right (sağ) ve top (üst) özellikleri ile hizalanmıştır.

 

background: Arkaplan Belirlemenin Kısa Yolu

Background kodu ile yukarıdaki tüm özellikleri tek bir kod ile yazabiliriz.

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

background-color, background-image, background-repeat ve background-position özellikleri yukarıda tek bir satırda birleştirilmiştir.



Kimler Neler Demiş?

avatar
  Subscribe  
Bildir