Zeki Can - WordPress

  CSS

CSS Arkaplan (background) Özelliği

CSS derslerimizde Temel Derslerimizi bitirdik ve bugün itibariyle CSS Stilleme derslerimize geçmiş bulunmaktayız. CSS arkaplan özelliğini ele alacağız. HTML sayfanızın ya da sayfanızda bir bölümün arkaplan rengini, resmini ve özelliklerini nasıl belirleyeceğimiz ile ilgili konulara değineceğim.

CSS arkaplan özellikleri bir HTML nesnesine arkaplan eklerken kullanılır. Backround da eklenen kodlar vardır. Bunlar şu şekildeler. 

background-color       // Arkaplan rengi
background-attachment    // Sabitliğini arkaplanın bu kod ile ayarlanır.
background-position   // adı üstünde pozisyon ayarlamaya yarar.
background-image    // Arkaplan resmidir.
background-repeat   // arkaplan olarak atanan şeyin tekrar edecekmi ne kadar tekrar edecek bu kod ile ayarlanır.
background   //  background: #000000 url('resim.jpg') no-repeat right top; // En kısa yoldan bu örnekte ki gibi arkaplan belirlemeye yarar.

Bu kodların hepsini sıra ile başlıklar  halinde tanımlayacağım.

CSS’de Renk İfadeleri

Web sitelerinde renkleri kullanmak okunan yazılarda olsun içerik kısımlarında olsun dikkat çekicidir. CSS renkleri üç şekilde kullanabiliriz.

• HEX renkleri bunlara Onaltılık Renklerde deniyor. #BE3223 gibi
• Renk Adları şeklinde tanımlama: Blue, Red gibi
• RGB (Kırmızı, Yeşil, Mavi)  Ana Renkleri

HEX (Onaltılık) Renkler:  Benim en çok kullandığım bu renklerdir. Bir iki renk değil her rengi bu tanımlama ile oluşturabilirsiniz.

#000000 şeklinde

Başa diyez sonrasında ise  6 adet karakter girilir. Bu karakterlerde  0-9 ve A-F değerleri alabilirler.

Örneğin #BE2626 bir kırmızı yakın bir rengi ifade etmektedir.

Bu renk kodlarına nasıl ulaşacaksınız?

Google da Renk Kodları diye aratın. Bir çok sitede bu kodları ve HEX değerini tıklayıp öğrenebilirsiniz.

Renk Adları: Her zaman olduğu gibi ortak ana dil olan İngilizce, renk adlarını tanımlamada da kullanılıyor. İngilizce olarak rengin adını yazın ve renk elde edin. Örneğin green yeşil, white beyaz, black siyah, blue mavi rengi verecektir size. Bu adları da nette arama yaparak çok kolay bir şekilde ulaşabilmeniz mümkündür.

Ana Renkler > RGB (Kırmızı, Yeşil, Mavi) : Renklerin hepsi aslında ana renklerden yani kırmızı, yeşil ve mavinin tonları belirterek oluşuyor. Mesela RGB( 4, 122, 24 ) olarak tanımlanmış bir renk bize Yeşil rengin tonunu belirtir. Peki Yeşill bir renk elde etmek istersek ne yapacağız. Red – Green – Blue üçlemesinde ortada yer alan yeşilinin değerini arttırmamız yeterli olur. Yani rgb( 0, 255, 0 ) yeşil rengi verir. 

Renklerle ilgili örnek kullanıma bakalım.

      /* Koyu Mavi */
      p { color: #040ef6; }

      /* Kırmızı tonu */
      div { color: red; }

      /* Yeşil renk */
      code { color: rgb( 0, 255, 0 ); }

background-color: Arka plan Rengini belirlemede işe yarar.

background-image: Arka plan Resmini belirlemede işe yarar.

Örnek Kullanımı:

div { background-color: #00ff00;  // Bunla rengi ifade ederiz
background-image: url('resmimizinismi.png');  // Bunlada resmimizinismi.png resmini arkaplan resmi olarak tanımlanırız.
}

Yukarı da ki örnekte  url(”) kodunun içine resmin bulunduğu adres yazılır. Tema klasörün içinde olduğundan resim direk adıyla yani resmimizismi.png olarak yazılmıştır. Tema klasörü dışında ya da web de bir resim eklenecekse uzun uzadıya adresi yazılmalıdır.

background-repeat: Arkaplanda olan resmin tekrar edip etmeyeceğini ne kadar tekrar edeceğini bildiren kod parçacığıdır. Dört tane formu vardır. Bunlar:

• no-repeat : Tekrar ettirmez. Bir kere kullanır.
• repeat : Tekrarlatır. Resmi döşer durur bittikçe.
• repeat-x : Sadece sağa doğru döşer.
• repeat-y : Sadece aşağı doğru döşer.

Alttaki örneğe bakıp kavrayalım:

 body {

         background-image: url('resim.jpg');

         background-repeat: no-repeat;
// resmi image ile belirledik, sonrasında tekrar etmesin diye no-repeat kullandık.
      }

 background-attachment: Arkaplanı Konuma Sabitler

fixed değerini alırsa pozisyonu değişmez arka planın. 

body {

         background-image: url('resimzekicannet.jpg');

         background-attachment: fixed;
         background-position: right top;

      }

background-position: Hizalama Kodu, Yukarıda bu resmi sağ üst kısma hizadık.

background: En çok bu kullanım yaygındır. Kısa Yoldan Arka plan Belirler

Şimdiye kadar bahsettiğim tüm özellikleri tek bir kod parçacığı ile kullanmaya yarar. Bunun için kullanacağımız kod: background kodudur.

body {

         background: #000000 url('enguzelresim.jpg') no-repeat right top;

      }

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

Resmin arkaplan rengini verdik, resmi verdik, tekrarlatmadık, sağ üstte yerleştirdik. 

  Benzer Yazılar

  Yorumlar

  Kategoriler

  Arama Yap

  Son yorumlar