Arka plan için kullanılan CSS özellikleri ise aşağıda ki gibidir.
[/FONT]
- [FONT=verdana]background-color[/FONT]
- [FONT=verdana]background-image[/FONT]
- [FONT=verdana]background-attachment[/FONT]
- [FONT=verdana]background-repeat[/FONT]
- [FONT=verdana]background-position[/FONT]
[FONT=verdana]
[COLOR=#0000cd]background-color [/COLOR]
arka plan rengini ayarlamak için.
background-color:#fff;
Alabileceği değerler;[/FONT][FONT=verdana]
- color : renk kodu
- transparent : transparan görünüm
- inherit : kalıtım alma
Default değer olarak transparent gelir.
[COLOR=#0000cd]background-image[/COLOR]
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
[/FONT][FONT=verdana]Default değer olarak none gelir.
[COLOR=#0000cd]background-attachment[/COLOR]
arka plan görüntüsünün arkada sabit mi? yoksa scroll ile kayması özelliği.
background-attachment:fixed;
Alabileceği değerler;[/FONT][FONT=verdana]
- fixed : arka plan sabit kalır
- scroll : scroll ile hareket eder
- inherit : kalıtım alma
[/FONT][FONT=verdana]Fixed değeri arkaplanı sabitler.
Default değer olarak scroll gelir.
[COLOR=#0000cd]background-repeat[/COLOR]
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;[/FONT][FONT=verdana]
- 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
[/FONT][FONT=verdana]Default olarak repeat gelir.
[COLOR=#0000ff]background-position
[/COLOR]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;
Ala[/FONT]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.
[COLOR=#0000ff]background
[/COLOR]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
[COLOR=#0000ff]background-size
[/COLOR]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.
[COLOR=#0000ff]background-origin
[/COLOR]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.
[COLOR=#0000ff]background-clip
[/COLOR]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