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.
EğitimarkaplanbiçimCSScss nedirhtml
CSS Dersleri

Ara

Eğitim


Konular

Tags

Hanci.org sizlere daha iyi hizmet sunmak için çerezleri kullanıyor.
Hanci.org sitesini kullanarak çerez politikamızı kabul etmiş olacaksınız.
Detaylı bilgi almak için Gizlilik ve Çerez Politikası metnimizi inceleyebilirsiniz.