Bir Önceki Dersimizde CSS Kod Yapısını Anlatmıştım. Bugün İse CSS Zemin Özellikleri Yanı Arkaplan Özelliklerini Anlatacağım. Bir Önceki Dersimize Buradan Gidebilirsiniz.
CSS Zemin Özellikleri
HTML'de Atadığımız Öğelere Arkaplan Vermek Veya Resim Eklemek İçin Aşağıdaki Kodları Kullanırız.
- Background-color : Zemin Rengi İçin Kullanılır.
- Background-image : Zemin Resmi İçin Kullanılır.
- Background-repeat : Zemin Resmi Tekrarı İçin Kullanılır.
- Background-attachment : Zemin Resmi İliştirme İçin Kullanılır.
- Background-position : Zemin Resmi Poziyonu İçin Kullanılır.
Zemin Rengi(Background-color)
“background-color” özelliği ögelerin (etiketlerin) zeminine renk vermek için
kullanılır. Renk belirleme işi için “Renk Birimleri” başlığında ele aldığımız yöntemlerden
istediğimizi seçebiliriz. Ancak en çok tercih edilen RGB kodu verilerek yapılandır. Buna Örnek Aşağıdaki Gibidir;
h1{
background-color:#3070E7;
}
Sitemizdeki h1 Etiketleri İçin Zemin Rengini #3070E7 Yapacaktır.
Zemin Resmi(Background-image)
“background-image” özelliği ögelere zemin resmi eklemek için kullanılır. Örnek
olarak “arkaplan.jpg” isimli görselimizi zemin resmi olarak sayfamıza eklemek için aşağıdaki
stil şablonu kodunu uygulamalıyız.
body{
background-image:url('arkaplan.jpg');
}
Yukarıda Sayfamızın Zemin Resmi arkaplan.jpg Olacaktır.
Zemin Resmi Tekrarı(Background-repeat)
"background-repeat" Kodu Zemine Eklenen Resmin Tekrarlanmasını Veya Tekrarlanmamasını Sağlar. Dört Ayrı Değeri Vardır ;
- background-repeat:repeat; = Görselin Hem Yatay Hem Dikey Tekrar Etmesini Sağlar.
- background-repeat:no-repeat; = Eklediğiniz Görseli Tekrar Ettirmez.
- background-repeat:repeat-x; = Eklediğimiz Görselin X(Yatay) Ekseninde Tekrar Etmesini Sağlar.
- background-repeat:repeat-y; = Eklediğimiz Görselin Y(Dikey) Ekseninde Tekrar Etmesini Sağlar.
Bunun Örneği Aşağıdaki Gibidir.
body{
background-image:url('arkaplan.jpg');
background-repeat:repeat;
}
Zemin Resmi Pozisyonu(Background-position)
"background-position" özelliği görselin sayfadaki pozisyonunu belirler. Dikey hizalamada üst (top), orta (center) ve alt (bottom) geçerli bir pozisyonken; yatay hizalamada sol (left), orta (center) ve sağ (right) geçerlidir. Bu özellik için 11 ayrı değer bulunmaktadır.
Top Left Top Center Top Right
Center Left Center Center Center Center
Bottom Left Bottom Center Bottom Center
Şeklinde Sitede Poziyonunu Ayarlayabilirsiniz. Örneği Aşağıdaki Gibidir.
body{
background-image:url('arkaplan.jpg');
background-repeat:repeat;
background-position:center-left;
}
Şeklinde Kullanılır.
Zemin Resmi İliştirme(Background-attachment)
“background-attachment” özelliği zemine yerleştirdiğimiz görselin kaydırma
çubuğu ile birlikte hareket edip etmeyeceğinin kontrolünü sağlar.
Görselin kaydırma çubukları ile birlikte hareket etmesini istiyorsak değer olarak “scroll” kullanırız. Geçerli (default) değer budur, hiçbir şey yazılmadığında bu durum yine
geçerlidir.
body{
background-image:url('arkaplan.jpg');
background-repeat:repeat;
background-attachment:scroll;
}
background-attachment Değerleri Aşağıdaki Gibidir;
- Fixed : Siz kaydırma çubuğunu aşağıya kaydırdığınız sürece arka plan da kayar.
- Local : Arka plan sadece bağlı olduğu objeye uygulanır.
- Scroll : Klasik yöntem. Varsayılan değer.
0 yorum:
Yorum Gönder
Konu Hakkındaki Yorumlarınız Ve Düşünceleriniz Bizim En Değerli Kaynağımızdır. Lütfen Bir Yorumlarınızı Ve Düşüncelerinizi Eksik Etmeyin... :)