CSS ile Arkaplan Biçimi

HTML derslerinde sayfanın
arkaplanını değiştirmek için <body> komutuna bgcolor="..."
parametresini atıyorduk. Bu parametre tablolar veya diğer kodlar (h1-h6,
marquee,vb... )için de geçerliydi.

Arkaplan Rengi
CSSde ise bu kodların background-color özelliğine renk değerleri veriyoruz.

Kod Alanı:body
{
background-color: yellow
}
td
{
background-color: #ffffcc
}
h1
{
background-color: rgb(100%,100%,85% )
}
div
{
background-color: #FFFFD9
}

Arkaplan Resmi
HTMLde arkaplana resim koymak için background="..." parametresinden
yararlanıyorduk. CSSde arkaplan resmi yerleştirmek için background-image
(arkaplan görüntüsü ) özelliğine url(... ) şeklinde adres değeri
veririz. Eğer arkaplana resim koymak istemiyorsak none değeri veririz.
Not:Arkaplan resmi istemezseniz, hiç bu özelliği yazmazsınız, olur
biter. Ama DHTML derslerinde bu none değerinin faydalarını göreceksiniz.

Kod Alanı:body
{
background-image: url(duvar.gif )
}
td
{
background-image: url(c:\kaplamalar\tiles.gif )
}
div
{
background-image: url( Yukleme Yapılan Resim Linki )
}
span
{
background-image: none
}

Arkaplan Resmini Döşeme
HTMLde arkaplan resimleri kendisini tekrarlıyordu. Oysa biz arkaplan
resimlerinin her zaman döşenmesini (kendisini tekrar etmesini )
istemeyiz. CSSde bunun için çok güzel bir özellik var:
background-repeat. Bu özelliğin alacağı değerler şöyle:

repeat Arkaplan resmini hem yatay hem de düşey olarak döşer (tekrarlar ).
background-repeat: repeat
repeat-x Arkaplan resmini sadece yatay olarak döşer.
background-repeat: repeat-x
repeat-y Arkaplan resmini sadece düşey olarak döşer.
background-repeat: repeat-y
no-repeat Arkaplan resmini döşemeden, tek bir resim halinde gösterir.
background-repeat:no-repeat

Kod Alanı:body
{
background-image: url(duvar.gif );
background-repeat: repeat
}
td
{
background-image: url(c:\kaplamalar\tiles.gif );
background-repeat: repeat-x
}
div
{
background-image: url( Yukleme Yapılan Resim Linki );
background-repeat: repeat-y
}
span
{
background-image: url(manzara.bmp );
background-repeat: no-repeat
}
Arkaplan Resminin Konumu
Sayfamızın arkaplanında tek bir resim yer alacaksa, bu resmin sayfa
üzerindeki konumunu belirlemeliyiz. Bunun için CSSnin
background-position özelliğinden yararlanırız. Bu özellik iki değer
birden alır, ilk değer resmin sayfaya göre düşey konumunu, ikinci değer
ise resmin sayfaya göre yatay konumunu ifade eder. background-position:
(düşey konum değeri ) (yatay konum değeri ). Bu değerleri aşağıdaki
biçimlerde yazabiliriz. Not: Bu özelliği NN gözatıcıları (browser )
desteklemiyor.

background-position: top left
background-position: top center
background-position: top right
background-position: center left
background-position: center center
background-position: center right
background-position: bottom left
background-position: bottom center
background-position: bottom right
background-position: (yüzde değer ) (yüzde değer )
background-position: (birim değer ) (birim değer )

Kod Alanı:body
{
background-image: url(monalisa.jbg );
background-repeat: no-repeat;
background-position: 100px 60px
}
td
{
background-image: url(c:\kaplamalar\tiles.gif );
background-repeat: no-repeat;
background-position: top left
}
div
{
background-image: url( Yukleme Yapılan Resim Linki );
background-repeat: no-repeat;
background-position: center center
}
span
{
background-image: url(manzara.bmp );
background-repeat: no-repeat;
background-position: 35% 35%
}

Arkaplan Resmini Sabitleme
Netscape gözatıcılarının tanımadığı bir diğer özellik de
background-attachment. Bu özellikle arkaplan resminin sayfayla beraber
kayıp kaymayacağını belirliyoruz. Eğer bu özelliğe scroll değerini
verirsek, sayfamızla beraber arkaplan resmi de scrollbar ile beraber
kayar. Eğer fixed değerini verirsek arkaplan resminin konumu scrollbara
göre değişmez, sabit kalır.

Kod Alanı:body
{
background-image: url(monalisa.jbg );
background-repeat: no-repeat;
background-position: 100px 60px;
background-attachment: fixed
}
td
{
background-image: url(c:\kaplamalar\tiles.gif );
background-repeat: no-repeat;
background-position: top left;
background-attachment: scroll
}
div
{
background-image: url(Yukleme Yapılan Resim Linki );
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed
}
span
{
background-image: url(manzara.bmp );
background-repeat: no-repeat;
background-position: 35% 35%;
background-attachment: scroll
}

Arkaplan Resim Özelliklerini Tek Kodla İfade Etme
Bir arkaplan resmini CSSde ifade etmek için; son uygulamamızda
olduğu gibi, dört özellikten yararlanmamız şart değil. Bu özelliklerin
hepsini background özelliğinde toplayabiliriz: background:
(background-color değeri ) (background-image değeri ) (background-repeat
değeri ) (background-attachment değeri ) (background-position değeri ).

Kod Alanı:
body
{
background: #ffffcc url(monalisa.jbg ) no-repeat fixed 100px 60px
}
td
{
background-image: crimson url(c:\kaplamalar\tiles.gif ) no-repeat scroll top left
}
div
{
background-image: rgb(100%, 100%, 85% ) url(Yukleme Yapılan Resim Linki ) no-repeat fixed center center
}
span
{
background-image: #FFFFD9 url(manzara.bmp ) no-repeat scroll 35% 35%
}
Burada Netscape gözatıcısı kullananlar bu kodun daha önce
belirttiğim background-positon, background-attachment bölümlerini
göremezler ama geri kalan kısımlarını görürler. Bu kod bir önceki Font
Formatı sayfasındaki font koduna benziyor değil mi? Herşey bir yana, iki
kod da kendi sayfalarının sonunda yer alıyor.