Embedded Files
Hazırlayan: Kemal Alper AKDENİZ
CSS ile Nasıl Arka Plan Eklenir ve Konumu Belirlenir?
CSS ile web sayfamıza arka plan ekleyebilir ve bu eklediğimiz arka planın konumunu belirleyebiliriz.
Aşağıda CSS kodları ile nasıl arka plan ekleyip konumunu belirleyebileceğinizi açıklamalı bir şekilde görebilirsiniz.
body {
background-image: url('mersinuni.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
CSS kısmında "body" etiketini kullanarak arka planımızı nereye yerleştireceğimizi belirtiyoruz. Daha sonra ise arka planımızı eklemek için "background-image: url('EklenecekResminAdı.format');" kodunu kullanarak ekleyebiliriz. Arka plan eklemek için url (bağlantı) kodunu kullarak resmimizin adı ve formatını (.png .jpg vb.) yazarak noktalı virgül ile de kapatarak işlemimizi gerçekleştiriyoruz.
"background-repeat:" ise arka planın sayfanızda tekrar etmesini ya da etmemesini sağlar. Örneğin resminiz küçük ise ve siz "background-repeat: no-repeat;" kodunu kullanmazsanız resim ekranınızı doldurana kadar tekrar eder. Resmimiz yeteri kadar büyük ise no-repeat yaparak diğer destekleyici kodlar ile ekranımıza düzgünce yerleştirebiliriz.
"background-attachment: fixed;" kodu ilede resmimizin sabitlenmesi sağlanır. Sayfayı aşağı kaydırdığımızda eğer bu kod kullanılıyorsa resim yukarıda kalmaz ve bizimle aşağı gelir. Yani her zaman arka planda bulunur ve konum değiştirmez.
"background-position:" kodunun çok elemanı vardır. Yukarıdaki örnekte "center" kullanarak resmimizi (arka planımızda olabilir) ortalamıştık. Arka planımızı ya da resmimizi farklı konumlara yerleştirmek için ise "center" yerine şu kodlar kullanılabilir;
left top (sol yukarı)
left center (sol orta)
left bottom (sol aşağı)
right top (sağ yukarı)
right center (sağ orta)
right bottom (sağ aşağı)
center top (orta yukarı)
center bottom (orta aşağı)
"background-position:" kodu ile daha spesifik yerlere arka planımızı ya da resmimizi yerleştirmek için ise yüzde (%) ve ya piksel (px) kullanabiliriz.
body {
background-image: url('mersinuni.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 75% 80%;
}
75% left (sol), 80% top (yukarı)'dan bırakılacak boşluğu ifade eder. Yüzde (%) yerine piksek (px) kullandığımızda da soldaki değer soldan, sağdaki değer yukarıdan bırakılacak boşluğu ifade eder. Aşağıdaki örnekte de piksel (px) ile konum belirlenmiştir.
body {
background-image: url('mersinuni.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 355px 300px;
}
body {
background-image: url('mersinuni2.jfif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
"background-size: cover;" kodu ile arka planımızın tamamen arka plana oturmasını sağlamaktayız.
Page updated
Report abuse