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:

css zemin

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:

  1. 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.)

  2. background-repeat:no-repeat; (Eklediğimiz görselin hiçbir şekilde tekrar etmesini istemiyorsak bu özelliği kullanırız.)

  3. background-repeat:repeat-x; (Eklediğimiz görsel yatay olarak yani x ekseni boyunca tekrar etsin istiyorsak bu özelliği kullanırız.)

  4. 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:

css zemin

ÖRNEK 2:

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

ÇIKTI:

css zemin

ÖRNEK 3:

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

ÇIKTI:

css zemin

ÖRNEK 4:

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

ÇIKTI:

css zemin

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.

  1. background-position:top left;(Bu bildirimi kullandığımızda görselimiz üstün solunda yer alacak.)

  2. background-position:top center;(Bu bildirimi kullandığımızda görselimiz üstün ortasında yer alacak.)

  3. background-position:top right;(Bu bildirimi kullandığımızda görselimiz üstün sağında yer alacak.)

  4. background-position:center left;(Bu bildirimi kullandığımızda görselimiz ortanın solunda yer alacak.)

  5. background-position:center center;(Bu bildirimi kullandığımızda görselimiz ortanın ortasında yer alacak.)

  6. background-position:center right;(Bu bildirimi kullandığımızda görselimiz ortanın sağında yer alacak.)

  7. background-position:bottom left;(Bu bildirimi kullandığımızda görselimiz altın solunda yer alacak.)

  8. background-position:bottom center;(Bu bildirimi kullandığımızda görselimiz altın ortasında yer alacak.)

  9. background-position:bottom right;(Bu bildirimi kullandığımızda görselimiz altın sağında yer alacak.)

  10. 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%; )

  11. 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:

css zemin

Ş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:

css zemin

"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.

  1. scroll: Sayfa hareket ettirildiğinde zeminin de kaymasını sağlar.

  2. fixed: Sayfa hareket ettirildiğinde zeminin 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 } 

Remzi Diyor ki 29/03/2016

Merhaba Hocam, hazır bir şablon düzenliyorum. Şablonda tanımlı background fotoğrafı yerine kendi fotoğrafımı koyuyorum. Kendi fotoğrafımın boyut değerlerini eklediğimde sorun yaşıyorum Hocam. Yine sağdan sola doğru tekrarlıyor yani kayıyor fotoğraf ama sonuna kadar gitmiyor belli bir yerde kesip tekrar başa alıyor ne yaptıysam düzeltemedim Hocam. Şablonda tanımlı orjinal fotoğraf 1500px 500 px. Benim fotoğrafım 7811 px 870px. Yardımcı olursanız çok çok makbule geçecek şimdiden teşekkür ederim Hocam.

 

Adınız

Eposta

Mesaj

3078

Güvenlik No

REKLAM
KATEGORİ
POPÜLER MAKALE