Html Kodlar | Tr.gg | Webmaster | Sitene Ekle | Html Kod | Photoshop | Dreamweaver | Webtasarim

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: rgb(255, 255, 217 )
}

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:kaplamalartiles.gif )
}
div
{
background-image: url(http://geocities.com/selnur/resimler/newworld.jpg )
}
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:kaplamalartiles.gif );
background-repeat: repeat-x
}
div
{
background-image: url(http://geocities.com/selnur/resimler/newworld.jpg );
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:kaplamalartiles.gif );
background-repeat: no-repeat;
background-position: top left
}
div
{
background-image: url(http://geocities.com/selnur/resimler/newworld.jpg );
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:kaplamalartiles.gif );
background-repeat: no-repeat;
background-position: top left;
background-attachment: scroll
}
div
{
background-image: url(http://geocities.com/selnur/resimler/newworld.jpg );
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:kaplamalartiles.gif ) no-repeat scroll top left
}
div
{
background-image: rgb(100%, 100%, 85% ) url(http://geocities.com/selnur/resimler/newworld.jpg ) no-repeat fixed center center
}
span
{
background-image: rgb(255, 255, 217 ) 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.

By AdiL

Html Kodlar | Tr.gg | Webmaster | Sitene Ekle | Html Kod | Photoshop | Dreamweaver | Webtasarim | Tr.gg Tasarimlari

Arkaplan Biçimi