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.
Kod:
background-color:[Linkleri Görebilmek için ÜYE Olmalısınız!Hemen ÜYE OL!]
Alabileceği değerler;bileceğ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.



  • 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.
Kod:
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.
Kod:
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.
Kod:
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.
Kod:
background-position:left top;
Kod:
background-position:50% 50%;
Kod:
background-position:12px 50px;
Ala
Kod:
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
Kod:
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.
Kod:
background-origin:border-box; background-originadding-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.
Kod:
background-clip:border-box; background-clipadding-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.