background-attachment nedir ve ne işe yarar ?
background-attachment web sayfamızda Kullandığımız zemin resminin sayfa kaydırıldığında sayfa elemanı ile birlikte kaydırılması veya sabit kalmasını denetliyor. İki değer alabilir scroll arkaplanın sayfa ile birlikte kaydırılmasını sağlar. Bu değer varsayılan değerdir, fixed arkaplan resminin sayfa kaydırılsa bile yerinde kalmasını sağlar. Bu özellik kullanıldığında sayfa içeriği arkaplan resmi üzerinden kayarak hareket eder. Kod:
<DIV STYLE=”background-image:url(zemin.jpg);
background-attachment:scroll;”>
Bu alanda kullanılan zemin resmi kayabilir
</DIV>
background-position kullanmış olduğumuz resimlerin konumunu belirler. resmi sayfanın istediğimiz bölümüne yerleştirebiliriz
background-position : dikeydeğer yataydeğer
Burada yatay değer yerinde soldan sağa doğru resmin nereye konulacağı, dikey değer yerinde ise üsten alta doğru resmin nereye konulacağını belirtilir.
üç şekilde değer kullanabiliriz,Değer girerek kullanımda direkt pixel olarak dikey ve yatay değer verilebilir.Yüzdelik değer verilir.bu orantısaldır ve browser penceresinin büyüklüğüne göre istenilen oranda ayarlama yapılır. Değer verilirken yüzdelik değer olduğunu değerin sonuna yüzde ( % ) işareti koyarak belirtilir.Tanımlı kelimeleri kullanmak dikey olarak resmin en üsten başlaması için top, ortalanması için center ve en alta yerlerştirilmesi için bottom değerleri kullanılabilir. Yine yatay olarak resmin solda başlaması için left, sağa dayalı olması için right ver ortalanması için center değerleri alabilir.
Kod:
P { background-image:url(zemin.jpg); background-position: center right;}
DIV { background-image:url(zemin.gif); background-position: 30 150;}
BODY { background-image:url(zemin.gif); background-position: 10% 20%;} background
Arkaplan resminin yerleştirilmesi için kısa bir tanımlamanın kullanılmasını sağlar. Resmin adı, yatay ve dikey konumu, sabit olup olmayacağı gibi özelliklerin tamamı veya bir kısmı bu özellik içerisinde kullanılabilir. Eksik özellik girildiğinde varsayılan değerler kullanılır.
Kod:
P { background : url(zemin.gif) top left;}
BODY { background : url(zemin.jpg) 39 45 fixed;}
.not { background : url(resim.gif) 10% 20%;} :::teknohaberci:::
