Arka plan icin kullanılan CSS ozellikleri ise aşağıda ki gibidir.
background-color background-image background-attachment background-repeat background-position
background-color
arka plan rengini ayarlamak icin.
Kod:
background-color:#fff;
Alabileceği değerler;
color : renk kodu transparent : transparan gorunum inherit : kalıtım alma
Default değer olarak transparent gelir.
background-image
arka plan'a resim dosyası eklemek icin 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 goruntusunun arkada sabit mi? yoksa scroll ile kayması ozelliğ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 goruntusunun tekrar etmesi veyahut etmemesi ozelliğidir. Default olarak repeat geldiği icin siz no-repeat demediğiniz surece devam eder.
Kod:
background-repeat:no-repeat;
Alabileceği değerler;
repeat : surekli x-y oranında tekrar eder repeat-x : sadece x yonune tekrar eder repeat-y : sadece y yonune tekrar eder no-repeat : hic bir yone tekrar etmez inherit : kalıtım alma
Default olarak repeat gelir.
background-position
arka plan goruntusunun ekranımızın neresinde durmasına karar verdiğimiz ozellik.
Kod:
background-position:left top;
Kod:
background-position:50% 50%;
Kod:
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 ozelliğini kısaltılmışı biraz karmaşık gorunsede fazla koddan bizi kurtaracaktır.
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 ozelliklerimiz mevcut onlardanda bahsedelim.
background-size background-origin background-clip
background-size
arka planın yukselik ve genişlik değerini ayarlamamızı sağlayan yeni ozellik
Kod:
background-size:40px 40px;
Alabileceği değerler ;
length : px değer percentage : % değer cover : iceriği ekrana tam olarak sığdırır. contain : iceriğin her yanı gorunecek şekilde ekrana sığdırır.
background-origin
arka planın nerden başlayacağını belirler.
Kod:
background-origin:border-box; background-origin
adding-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 icerikten başlar.
background-clip
arka planı kırpmak icin kullanır. Arka planı koyduğumuzda kucultmek yerine kırparak gosterir.
Kod:
background-clip:border-box; background-clip
adding-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 icerikten başlar.
Kaynak : http://www.telays.com/showthread.php?t=133