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 } 

Lütfen konu haricinde soru sormayın cevaplanmayacaktır. Yorumunuz onaylandıktan sonra yayınlacaktır.

8411

KATEGORİ
  • HTML
  • CSS
  • PHP
  • JQUERY
  • PHOTOSHOP
  • JavaScript
  • Web Dünyası
  • Linux
POPÜLER MAKALE
  • HTML RESME LİNK VERME
  • HTML LİNK(Bağlantı)EKLEME - LİNK VERME
  • HTML YAZI VE RESİM ORTALAMA
  • HTML FORM OLUŞTURMA
  • HTML DİV ve SPAN NEDİR?
  • HTML KAYAN RESİM VE Marguee KULLANIMI
  • HTML ARKAPLANA MÜZİK EKLEME
  • CSS (BOYUT) GENİŞLİK VE YÜKSEKLİK (Width-Height)
  • HTML RESİM EKLEME
  • PHP ceil()-floor()-round() YUVARLAMA FONKSİYONU
ETİKET
WEBCEBİR © 2013 Tüm hakları saklıdır.