CSS ARKAPLAN (Background) RESiM ÖZELLİKLERİ

background-image özelliği ve ögelerine istediğimiz zemin resmi eklemek ve konumlandırmak için kullanılırız. Örnek olarak "zemin.jpg" isimli görselimizi zemin resmi olarak sayfamıza eklemek için aşağıdaki stil şablonu kodunu uygulamalıyız.

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

ÇIKTI:

ZEMİN RESMİ TEKRARI

background-repeat özelliği zemine eklenen görselin tekrarlanma biçimini kontrol etmek için kullanılır. Dört ayrı değer alır:

• background-repeat:repeat; (Görselin hem yatay olarak hem de dikey olarak tekrar etmesini istiyorsak bu özelliği kullanırız. Bu özellik yazılmasa bile CSS varsayılan olarak bunu yapacaktır.)
• background-repeat:no-repeat; (Eklediğimiz görselin hiçbir şekilde tekrar etmesini istemiyorsak bu özelliği kullanırız.)
• background-repeat:repeat-x; (Eklediğimiz görsel yatay olarak yani x ekseni boyunca tekrar etsin istiyorsak bu özelliği kullanırız.)
• background-repeat:repeat-y; (Eklediğimiz görsel dikey olarak yani y ekseni boyunca tekrar etsin istiyorsak bu özelliği kullanırız.)

ÖRNEK 1:

body{background-image:url(logo.png); 
     background-repeat : repeat; 
     }
 

ÇIKTI:

ÖRNEK 2:

body{background-image:url(logo.png); 

     background-repeat :no-repeat;
 
     } 

ÇIKTI:

ÖRNEK 3:

body{background-image:url(logo.png); 

     background-repeat :repeat-x; 
     }
 

ÇIKTI:

ÖRNEK 4:

body{background-image:url(logo.png); 

     background-repeat :repeat-y; 

     } 

ÇIKTI:

ZEMİN RESMİ POZİSYONU

"background-position" özelliği görselin sayfadaki pozisyonunu belirler. Dikey hizalamada üst (top), orta (center) ve alt (bottom) geçerli bir pozisyonken; yatay hizalamada sol (left), orta (center) ve sağ (right) geçerlidir. Bu özellik için 11 ayrı değer bulunmaktadır.

• background-position:top left;(Bu bildirimi kullandığımızda görselimiz üstün solunda yer alacak.)
• background-position:top center;(Bu bildirimi kullandığımızda görselimiz üstün ortasında yer alacak.)
• background-position:top right;(Bu bildirimi kullandığımızda görselimiz üstün sağında yer alacak.)
• background-position:center left;(Bu bildirimi kullandığımızda görselimiz ortanın solunda yer alacak.)
• background-position:center center;(Bu bildirimi kullandığımızda görselimiz ortanın ortasında yer alacak.)
• background-position:center right;(Bu bildirimi kullandığımızda görselimiz ortanın sağında yer alacak.)
• background-position:bottom left;(Bu bildirimi kullandığımızda görselimiz altın solunda yer alacak.)
• background-position:bottom center;(Bu bildirimi kullandığımızda görselimiz altın ortasında yer alacak.)
• background-position:bottom right;(Bu bildirimi kullandığımızda görselimiz altın sağında yer alacak.)
• background-position:x% y%;(Görselimize yatay ve dikey olarak yüzde üzerinden pozisyon vermemizi sağlar. ilk yüzde yatayın, ikinci yüzde ise dikeyin pozisyonudur. Örnek: background-position:80% 55%; )
• background-position:xpos ypos;(Görselimize yatay ve dikey olarak pixel bakımından pozisyon vermemizi sağlar. İlk pixel'li rakam yatayın, ikinci pixel'li rakam ise dikeyin pozisyonudur. Örnek: background-position:150px 200px; )

Örnek olarak bir ağaç resmini merkez sağa yerleştirelim:

body {width:100%; height:650px;

      background-image: url(agac.jpg);
 
      background-repeat : no-repeat; 

      background-position:center right;
      }
 

ÇIKTI:

Şimdide ikinci örnek olarak ağaç resmini alt merkeze yerleştirelim:

body {width:100%; height:650px;

      background-image: url(agac.jpg);
 
      background-repeat : no-repeat; 

      background-position:bottom center;
       }
 

ÇIKTI:

"background" özelliklerini kısaltma uygulayarak şöyle de yazabilirdik:

body{ background:url(logo.gif) no-repeat top center;}

Birkaç örnek daha yapalım:

 body{ background: url(logo.gif) no-repeat bottom right;}
 
 body{ background: url(logo.gif) no-repeat 60% 75%;}
 
 body{ background: url(logo.gif) no-repeat 100px 200px;} 

background-attachment özelliği

Zemine eklenen resim sayfa ile beraber kaymasını veya sayfanın zeminine sabit kalmasını sağlar.

Hiçbir Şey yazılmadığında default(Geçerli) değer; scroll'dur

body {background-image: url(logo.gif);
 
      background-repeat : no-repeat; 

      background-attachment: fixed } 

body {
      background-color: lightblue;
     }

<body style="background-color: lightblue;">