Background-Attachment-CSS ile Arkaplanı Sabitleme veya Kaydırma


08.01.2012-23:02 Tarihinde Eklendi.
www.seyfettinkahveci.com Derecelendirme: 10 / 10 Oy Sayısı: 16002827Toplam Puan: 34770 / Yorum Sayısı: 412002827 adet.


Kodlar:

<html>
<head>
<style type="text/css">
body
{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>
</head>

<body>
<p><b>Not:</b> "fixed" Sadece Opera Ve Firefox de çalışmaktadır.</p>
</body>
</html>


Kodların Açıklaması:
Background-image: Arkaplana Resim ekler. ur('Resmin Adresi') olarak kullanılır.
Background-repeat: Arkaplandaki resmin tekrarlanıp tekrarlanmaması ayarları bu kısımdan yapılır. Değerleri:
repeat-x; X ekseninde tekrarla.
repeat-y; Y ekseninde Tekrarla.
repeat:Hem X Ekseninde Hem Y Ekseninde Tekrarla.
No-Repeat:Tekrarlama yok.
Background-attachment: Arkaplanının kaydırılıp kaydırılmayacağı bu kısımdan belirlenir.Değerleri:
Fixed; Arkaplandaki resim yazılar kaydırıldıkca önceki yerinde kalır. Mesela ortada olan resim sayfa kaydırıldıkca yine ortada görünür yani yerine sabitlenir.
Scroll;Arkaplandaki resim yazılar kaydırıldıkca yerinde kalır. Mesela ortada olan resim sayfa kaydırıldıkca artık ortada olmaz aşağı doğru kaydırıldıkça resim üst taraflarda kalır ve görünmez.
Background-position: Arka planın nerede konumlanacağını belirtir. Değerleri;
Top:Üst tarafta,
bottom:Alt tarafta,
left:solda,
right:sağda;

center;Ortada.


Not: Üst Sağ için Top right, alt sol için bottom left kullanabilirsiniz.
Arkadaşlar herhangi bir probleminiz olursa yorumlar kısmından yazın en kısa sürede cevaplamaya çalışırım.

Seyfettin KAHVECİ
Balıkesir Üniversitesi
NEF-BOTE



Yazının tamamının kopyalanması yasaktır. En baştaki birkaç paragrafı kopyalayıp, yazıya link verebilirsiniz. Aksi durumda uyarılmaksızın yasal yollara gidilecektir.

Yorum Ekle

Ad Soyad:
Şehir:
Yorum:
Yorumlar
Ad Soyad:Tuncay DoğanŞehir:Ankara
Tarih:12.05.2014
Soru Sitemin kenarlarına, <div id="sagdasabit" style="position: absolute ; right: 10px; top: 100px; z-index: 1;"></div> bu kodu kullanarak reklam ekledim fakat tarayıcı büyüdüğünde, reklam yunların üzerine gelmektedir. Acaba bana yardım edebilirmisiniz. Eklediğim reklamlar tarayıcı büyüdüğünde de küçüldüğünde de hey aynı yerinde kalsın istiyorum acaba bunun kodu nedir. yardımızını bekliyorum sitenize girip bakacağım cevabınıza
Cevap Bu şekilde yaparsanız ekran çözünürlüğü küçüldüğünde de aynı hatayı alırsınız. Çözümü ise bu şekilde kullanmak yerine sitenizin htmlini tekrar düzenleyip sağ tarafa reklam bölümü açmak. Ancak bu şekilde istediğiniz sonuca ulaşabilirsiniz.