Arkaplan Resmi
HTML’de arkaplana resim koymak için background=”…” parametresinden yararlanıyorduk. CSS’de 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.
Â
body
{
background-image: url(duvar.gif)
}
td
{
background-image: url(c:\kaplamalar\tiles.gif)
}
div
{
background-image: url(http://geocities.com/selnur/resimler/newworld.jpg)
}
span
{
background-image: none
}
Arkaplan Resmini Döşeme
HTML’de arkaplan resimleri kendisini tekrarlıyordu. Oysa biz arkaplan resimlerinin her zaman döşenmesini (kendisini tekrar etmesini) istemeyiz. CSS’de 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 |
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(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 CSS’nin 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) |
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(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.
Â
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(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 CSS’de 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).
Â
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(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.Â
Â
Â
Â
Yorumlar
Yorum Yok
Yorumunuzu Ekleyin
Yorum eklemek için giris yapmalısınız.