CSS Bir taga arkaplan resimi / zemin resmi eklemek - background-image - PcTekno.NET | PTN

Konumunuz: Anasayfa

CSS

CSS Bir taga arkaplan resimi / zemin resmi eklemek - background-image

Cuma, 04 Mayıs 2007

Bir taga arkaplan/zemin resmin yerleştirilmesi

Bir elamana zemin resmi yerleştirmek için birçok özellik geliştirilmiştir. Bunlar arkaplan resminin nasıl kullanılacağını belirlemeye yarar. Şimdi bu özellikleri inceleyelim :

background-image

Bir elemana zemin resmi yerleştirmekte kullanılır. Bu özellikle birlikte resmin tam veya göreceli adreside verilmek zorundadır. Kullanımı :

background-image:url(resmin_adresi);

şeklindedir. Şimdi bir DIV tagına zemin resmi yerleştirelim.

 <DIV STYLE="background-image:url(zeminresmi.jpg);">
Bu yazı bir zemin resmi üzerine yerleştirilmiştir.
Kullanılan zemin resmi eğer bu alandan küçükse zemin
doldurulana kadar tekrarlanacaktır.
<P>Eğer arkaplan resmi bu alandan büyük ise
resmin bu alana sığan kısmı gösterilecektir.
</DIV>

Şimdide yukarıdaki örneğin sonucunu görelim.

Bu yazı bir zemin resmi üzerine yerleştirilmiştir. Kullanılan zemin resmi eğer bu alandan küçükse zemin doldurulana kadar tekrarlanacaktır.

Eğer arkaplan resmi bu alandan büyük ise resmin bu alana sığan kısmı gösterilecektir.

background-repeat

Arkaplana bir resim yerleştirildiğinde bu resmin ne kadar ve nasıl tekrarlanacağını belirtir. Eğer bu özellik kullanılmaz ise zeminresmi alandan küçük olduğu durumlarda resim alan doldurulana kadar yatay ve dikey olarak tekrar tekrar basılır.

Bu özelliği kullanarak resmin tekrarlanmamasını, yatay veya dikey tekrarlanamsını sağlayabiliriz. Bu özelliğin alabileceği değerler :

repeat resmin yatay ve dikey olarak tekrarlanmasını sağlar.
repeat-x resmin sadece yatay olarak tekrarlanmasını sağlar.
repast-y resmin dikey olarak tekrarlanmasını sağlar.
no-repeat resmin tekrarlanmasını önler.

Örnek bir kullanımda zemin.jpg resmini bir P tagı içerisinde dikey olarak tekrarlatalım.

 <P STYLE="background-image:url(zemin.jpg);background-repeat:repeat-y">
Bu pragraf içerisinde arkaplan resmi kullanılmıştır.
Resim arka planda sadece dikey olarak tekrarlanacaktır.
<BR>
Bu pragraf içerisinde arkaplan resmi kullanılmıştır.
Resim arka planda sadece dikey olarak tekrarlanacaktır.
<BR>
Bu pragraf içerisinde arkaplan resmi kullanılmıştır.
Resim arka planda sadece dikey olarak tekrarlanacaktır.
<BR>
Bu pragraf içerisinde arkaplan resmi kullanılmıştır.
Resim arka planda sadece dikey olarak tekrarlanacaktır.
<BR>
Bu pragraf içerisinde arkaplan resmi kullanılmıştır.
Resim arka planda sadece dikey olarak tekrarlanacaktır.
<BR>
Bu pragraf içerisinde arkaplan resmi kullanılmıştır.
Resim arka planda sadece dikey olarak tekrarlanacaktır.
<BR>
Bu pragraf içerisinde arkaplan resmi kullanılmıştır.
Resim arka planda sadece dikey olarak tekrarlanacaktır.
<BR>
Bu pragraf içerisinde arkaplan resmi kullanılmıştır.
Resim arka planda sadece dikey olarak tekrarlanacaktır.
<BR>
Bu pragraf içerisinde arkaplan resmi kullanılmıştır.
Resim arka planda sadece dikey olarak tekrarlanacaktır.
<BR>
Bu pragraf içerisinde arkaplan resmi kullanılmıştır.
Resim arka planda sadece dikey olarak tekrarlanacaktır.
<BR> </P>

Örneğimizin socunu :

Bu pragraf içerisinde arkaplan resmi kullanılmıştır.
Resim arka planda sadece dikey olarak tekrarlanacaktır.
Bu pragraf içerisinde arkaplan resmi kullanılmıştır.
Resim arka planda sadece dikey olarak tekrarlanacaktır.
Bu pragraf içerisinde arkaplan resmi kullanılmıştır.
Resim arka planda sadece dikey olarak tekrarlanacaktır.
Bu pragraf içerisinde arkaplan resmi kullanılmıştır.
Resim arka planda sadece dikey olarak tekrarlanacaktır.
Bu pragraf içerisinde arkaplan resmi kullanılmıştır.
Resim arka planda sadece dikey olarak tekrarlanacaktır.
Bu pragraf içerisinde arkaplan resmi kullanılmıştır.
Resim arka planda sadece dikey olarak tekrarlanacaktır.
Bu pragraf içerisinde arkaplan resmi kullanılmıştır.
Resim arka planda sadece dikey olarak tekrarlanacaktır.
Bu pragraf içerisinde arkaplan resmi kullanılmıştır.
Resim arka planda sadece dikey olarak tekrarlanacaktır.
Bu pragraf içerisinde arkaplan resmi kullanılmıştır.
Resim arka planda sadece dikey olarak tekrarlanacaktır.
Bu pragraf içerisinde arkaplan resmi kullanılmıştır.
Resim arka planda sadece dikey olarak tekrarlanacaktır.