Background: arka plan - zemin anlamına gelmektedir.
Arka plan için kullanılan CSS özellikleri ise aşağıda ki gibidir.

  • background-color
  • background-image
  • background-attachment
  • background-repeat
  • background-position


background-color
arka plan rengini ayarlamak için.
background-color:#fff;
Alabileceği değerler;
  • color : renk kodu
  • transparent : transparan görünüm
  • inherit : kalıtım alma

Default değer olarak transparent gelir.


background-image
arka plan'a resim dosyası eklemek için kullanılır.
background-image:url('gradient2.png');
Alabileceği değerler;
  • url : url adresi
  • none : arka plan yok
  • inherit : kalıtım alma

Default değer olarak none gelir.


background-attachment
arka plan görüntüsünün arkada sabit mi? yoksa scroll ile kayması özelliği.
background-attachment:fixed;
Alabileceği değerler;
  • fixed : arka plan sabit kalır
  • scroll : scroll ile hareket eder
  • inherit : kalıtım alma

Fixed değeri arkaplanı sabitler.
Default değer olarak scroll gelir.


background-repeat
arka plan görüntüsünün tekrar etmesi veyahut etmemesi özelliğidir. Default olarak repeat geldiği için siz no-repeat demediğiniz sürece devam eder.
background-repeat:no-repeat;
Alabileceği değerler;
  • repeat : sürekli x-y oranında tekrar eder
  • repeat-x : sadece x yönüne tekrar eder
  • repeat-y : sadece y yönüne tekrar eder
  • no-repeat : hiç bir yöne tekrar etmez
  • inherit : kalıtım alma

Default olarak repeat gelir.


background-position
arka plan görüntüsünün ekranımızın neresinde durmasına karar verdiğimiz özellik.
background-position:left top;
background-position:50% 50%;
background-position:12px 50px;
Alabileceği değerler ;


  • left top
  • left center
  • left bottom
  • right top
  • right center
  • right bottom
  • center top
  • center center
  • center bottom
  • xpos - ypos
  • x% - y%
  • inherit

Default değer olarak 0% 0% ile gelir.


background
arka plan özelliğini kısaltılmışı biraz karmaşık görünsede fazla koddan bizi kurtaracaktır.
background: #fff url('telays.gif') no-repeat fixed center;
tekrar anlatmama gerek yok sanırım ne işe yaradıklarını.




CSS3 ile yeni katılan özelliklerimiz mevcut onlardanda bahsedelim.



  • background-size
  • background-origin
  • background-clip

background-size
arka planın yükselik ve genişlik değerini ayarlamamızı sağlayan yeni özellik 
background-size:40px 40px;
Alabileceği değerler ;
  • length : px değer
  • percentage : % değer
  • cover : içeriği ekrana tam olarak sığdırır.
  • contain : içeriğin her yanı görünecek şekilde ekrana sığdırır.

background-origin
arka planın nerden başlayacağını belirler.
background-origin:border-box;
background-origin:padding-box;
background-origin:content-box;
Alabileceği değerler;
  • padding-box : arka plan padding alanından başlar.
  • border-box : arka plan border alanından başlar.
  • content-box : arka plan içerikten başlar.

background-clip
arka planı kırpmak için kullanır. Arka planı koyduğumuzda küçültmek yerine kırparak gösterir. 
background-clip:border-box;
background-clip:padding-box;
background-clip:content-box;
Yine alabileceği değerler background-origin ile aynıdır.


  • padding-box : arka plan padding alanından başlar.
  • border-box : arka plan border alanından başlar.
  • content-box : arka plan içerikten başlar.





Kaynak : http://www.telays.com/showthread.php?t=133