vBulletin Background Şablonları
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:#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.
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;
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.
Kod:
background: #fff url('telays.gif') no-repeat fixed center;


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

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.