CSS BACKGROUND (ARKA PLAN) ÖZELLİKLERİ

CSS ile sayfadaki elemanların bir çok arka plan özellğini istediğimiz gibi ayarlayabiliriz.. 

BACKGROUND-COLOR

Elemanların arkaplan rengini ayarlar.. Zemin rengi , renk isimleri ile eklenebileceği gibi HTML'de anlattığım renk kodları ilede verilebilir..

HTML

<p> PARAGRAF </p>
<div> 
     <span> SPAN </span> 
</div>

CSS

p { background-color: skyblue; }  /*renk adı */
div { background-color: #1254af; }  /* hex renk kodu /
span { background-color: rgba(255, 204, 0,.8); }  /* transparan RGBA kodu

EKRAN

BACKGROUND-IMAGE

Elemanların arkaplan resmini ayarlar.. Resim dosyası url() parantezi içerisinde ve varsa klasör yolu ile belirtilmelidir..

HTML

<div class="apdiv"> </div>

CSS

div.apdiv {   background-image: url('resim/css2mini.jpg');  height:200px; }    

EKRAN

Eklenen arka plan resmi elemanın boyutlarından küçükse , resim otomatik olarak hem yatayda hem dikeyde tekrar edecektir..

BACKGROUND-REPEAT

Background-repeat , arka plan resimlerinin tekrar edip etmemesini ayarlar. 4 farklı değer alır.

• no-repeat : tekrar yok, 
• repeat-x : sadece yatayda tekrarlar,
• repeat-y : sadece dikeyde tekrarlar,
• repeat : hem yatay hem dikeyde tekrarlar (varsayılan)

HTML 

<div class="apdiv"> </div>

CSS

div  {  
         height:200px; 
         background-image: url('resim/css2mini.jpg');

         background-repeat: no-repeat; 
         background-repeat: repeat-x; 
         background-repeat: repeat-y;
         background-repeat: repeat; 
   }    

BACKGROUND-POSİTİON

Background-position, arka plan resminin, zemin üzerinde nasıl konumlanacağını belirler..

• Yönlerle Konumlandırma  
• X ve Y Koordinat Değerleri ile  Konumlandırma ( % ve PX)

YÖNLERLE KONUMLANDIRMA 

Arka plan resmi için ,  yatayda sol (left) orta (center)  ve sağ (right)  yönleri, dikeyde ise üst (top) , orta (center) ve alt (bottom) yönlerinin seçilerek yapılan konumlandırmadır. Yönler yazılırken önce yatay konum sonra dikey konum yazılır ve arada boşluk  bırakılır..

HTML 

<div class="apdiv"> </div>

CSS

div  {  
         height:100px; 
         background-image: url('resim/css2mini.jpg');
         background-repeat: no-repeat; 

         background-position: left-top;  /* sol üste konumlanır */
         background-position: center-center;  /* tam ortaya konumlanır */
         background-position: right-bottom;  /*sağ alta konumlanır */
   
   }    

Diğer yönleri de ikili yazarak farklı konumlar elde edebilirsiniz.. "left bottom" , left center" , center bottom" vs gibi....

X ve Y  DEĞERLERİYLE KONUMLANDIRMA (% ve PX)

Arka plan resmi   ,  yatay X ve dikey Y koordinatları yüzde yada piksel  cinsinden yazılarak konumlandırılabilir. Sol üst köşe  0,0 orijin noktasıdır. Verilecek yüzde oranlarında  yada piksel miktarlarında, pozitif değerlerde resim yatayda sağa , dikeyde aşağıya doğru konumlanır. Negatif değerlerde ise  tam tersi yönlerde konumlanır.. Yönler yazılırken önce yatay koordinat oranı % ,  yada miktarı PX ,  sonra dikey koordinat oranı  % , yada miktarı  PX  yazılır ve arada boşluk  bırakılır..

HTML 

<div class="apdiv"> </div>

CSS

div  {  
         height:100px; 
         background-image: url('resim/css2mini.jpg');
         background-repeat: no-repeat; 

         background-position: 100px 30px;  /* sol ortaya yakın konumlanır */
         background-position: 50% 50%;  /* tam ortaya konumlanır */
         background-position: 90% 90%;   /*sol üstten dışarıya doğru konumlanır */ 
   
   }    

X ve Y koordinatları için farklı oranlar % yada miktarlar PX yazarak istediğiniz konumu elde edebilirsiniz..

BACKGROUND-SIZE

Background-size, arka plan resminin boyutunu, başka bir deyişle  yerleşme oranını belirler.. Resim zemini tamamen kaplayabileceği gibi , belrli bir oranda zeminden küçük yada daha büyükte yapılabilir. Resim boyutnu birkaç farklı yolla değiştirebiliriz..

• Genişlik ve Yükseklik ile Boyut Belirleme
• Cover yada Contain ile Sığdırma

GENİŞLİK VE YÜKSEKLİK İLE BOYUT BELİRLEME

Arka plan resmini , genişlik ve yükseklik değerleri ile boyutlandırabiliriz. Değerler, YÜZDE ORAN yada PX uzunluklar olabilir.  Size için bir yada iki değer verilebilir. Verilen yüzde oranlar , arka plan resmi uygulanan elemanın genişlik ve yüksekliğine göre alınır.

• "Size" için  1 değer yazılırsa , resmin  genişliği olur.  Bu durumda resmin yüksekliği, resmin orjinal genişlik/yükseklik oranı (ölçek) bozulmayacak şekilde otomatik ayarlanır..
• "Size" için 2 değer yazılırsa ilki resim genişliği , ikincisi ise yüksekliğini belirler. Resmin orjinal ölçeği bozulabilir. Ayırca değerlerin biri PX biri yüzde oranıda olabilir.

Body'ye değerler vererek sonuçlara bakalım...

body  {  
       
         background-image: url('resim/css2mini.jpg');  /* arka plan resmi */
         background-repeat: no-repeat;   /* arka plan resim tekrarı */

        
         background-size:50%;  /* Resim genişliği  sayfanın yarısı olurken ,   yükseklik resmin orjinal ölçeğine göre ayarlanır.. */    
         background-size:100%;     /* Resim genişliği  sayfayı kaplarken , yükseklik resmin orjinal ölçeğine göre ayarlanır.. */
         background-size:100% 100%;   /* Hem resim genişliği hemde yüksekliği 100% olacağından , resim sayfayı tam olarak kaplar */
         background-size:100px;  /* Resim genişliği  100PX olurken , yükseklik resmin orjinal ölçeğine göre ayarlanır.. */
         background-size:150px 150px;   /* Hem resim genişliği hemde yüksekliği 100PX olur */
         background-size:50% 100px;  /* Resim genişliği 10px , yüksekliği 150px olur.. */
     
   }    

COVER VE CONTAIN İLE BOYUT BELİRLEME

Arka plan resmini , genişlik ve yükseklik değerlerinin  dışında, elemana sığdIrabilmek için COVER ve CONTAIN kullanarakta boyutlandırabiliriz. 

COVER :

Cover, örtmek kaplamak anlamına gelir. "Size" özelliği olarak kullanıldığında , resmin genişliği , arka plan resmi uygulanan elemanın genişliğie eşitlenir ve, resmin yüksekliği , orjinal en/boy oranı bozulmayacak şekilde otomatik olarak ayarlanır. Resimde görüntü kaybı olabilir. Ayrıca eğer resmin orjinal yüksekliği , genişliğine göre çok düşükse , resim elemanı tam olarak kaplamayabilir..

CONTAIN : 

Contain, içermek kapsamak anlamına anlamına gelir. "Size" özelliği olarak kullanıldığında , resmin en büyük ölçüde , en boy oranı bozulmadan,  tam olarak eleman içerisine sığdırılması sağlanır. Resimde görüntü kaybı olmaz..

CSS

body  {  
       
         background-image: url('resim/css2mini.jpg');  /* arka plan resmi */
         background-repeat: no-repeat;   /* arka plan resim tekrarı */ 
        
         background-size:cover;  /* Resim genişliği  sayfayı kaplar, yükseklik resmin orjinal ölçeğine göre ayarlanır.. */    
         background-size:contain;       
   }    

BACKGROUND-ATTACMENT

Background-attachement, arka plan resminin sayfa ile beraber hareket edip etmeyeceğini belirler. VAarsayılan değer scroll'dur. Arka plan resmi sanki normal bir resimmiş gibi , sayfa kaydırıldığında sabit durmaz ancak attachment için sabit değeri uygulanırsa sayfa kaydırıldığında resim sabit görünecektir..

scroll : Resim sayfa kaydırılıdğında sabit normal bir resimmiş gibi sayfayaa beraber kayar.. Varsayılan değerdir..

fixed : Resim,sayfa kaydırılırken sabit kalır..

body  {  
       
         background-image: url('resim/css2mini.jpg');  /* arka plan resmi */
         background-repeat: no-repeat;   /* arka plan resim tekrarı */ 
         background-size:100% 100%;
         
         /* background-attachment:scroll; Varsayılan : Arka Plan Resmi sayfa kaydırıldığında normal bir resimmiş gibi davranır.. */    
         background-attachment:fixed;  /* Arka Plan Resmi sayfa kaydırıldığında sabit kalır..*/    
   }    

Görüşmek üzere..