CSS3 ile HTML ile oluşturulmuş web sayfalarına güzel bir görünüm katma işlemini gerçekleştirirken bugün ki konumuz ise CSS3 background kullanımı hakkında olacaktır. Background kelime anlamıyla baktığımız zaman arka plan demektir.
Yani biz bu etiket sayesinde sürekli olarak HTML etiketlerinin arka planlarıyla uğraşacağız demektir. Efendime söyleyeyim arka plana resim eklemek, arka plan rengi eklemek, arka plan resmine belirli bir konum vermek gibi işlemler aslında CSS background etiketi kullanımı sayesinde gerçekleşmektedir. Backgorund etiketi sadece tek başına değil yanına aldığı parametreler sayesinde işlevlerini gerçekleştirmektedir.
gibi parametreler alarak her biri farklı anlama gelerek sizin HTML ile oluşturacağınız web sayfasında güzelleştirmeler yapmanız olanak sağlar. Dilerseniz şimdide sırası ile hangisinin ne işe yaptığına bakalım.
CSS Arka Plan Rengi Ekleme
Zaten önceki HTML videolu ve yazılı oluşturmuş olduğumuz içeriklerden de hatırlayacağımız şekilde en kolayımıza giden bir şey bir HTML ‘de yer alan bir etiketin arka plan rengini değiştirmektir.
<style>
body {
background-color : blue;
}
</style>
Yukarıda biz artık HTML ile oluşturduğumuz web sayfasının gövdesinin yani tüm ekranın renginin mavi olmasını sağladık. Bu arada bir önce ki eğitimimiz olan CSS renk tanımlamaları dersinden hatırlayacağınız şekilde bu kısmada rgb, hsl, hex, rgba, hsla gibi renk eklemeleri yapabilmeniz mümkündür.
CSS Arka Plana Resim Ekleme
Bu konuya da sanki önce ki HTML eğitim videolarını takip ediyorsanız bir çok kez değindiğimiz hatırlıyorum fakat biz yinede tekrar etmenin akılda kalıcı özelliğinden yararlanarak tekrarlamakta bir sakınca görmüyorum. Bizler artık arka plana bir renk eklemek yerine bir resim ekleyerek oluşturmuş olduğumuz internet sayfasını daha da güzelleştirme işlemini gerçekleştirebiliriz.
<style>
body {
background-image: url("agac.png");
}
</style>Şimdi ise artık bizler arka planımıza bir resim ekleme işlemini başarıyla gerçekleştirmiş bulunuyoruz. Bizler parantezin içinde yer alan kısma sunucumuzda olan bir resmi klasörüne göre yazabilir iken internetten her hangi bir sayfada ki resmide bu iki tırnak arasına url olarak koymamız mümkündür.
CSS Arka Plan Resmi Tekrarlama
Bizler otomatik olarak bir üst basamakta ki şekilde resmi eklediğimizde tekrarlanacaktır. Bizler bu tekrarlama işleminin gerçekleşmesini, hangi düzlem yada boylamda gerçekleşmesini yada hiç gerçekleşmemesini sağlamak için ise kullanacağımız parametre repeat olacaktır.
<style>
body {
background-image: url("resim.jpg");
background-repeat : repeat-x;
}
</style>
Bizler artık x kordinatı üzerinde eklemiş olduğumuz resmin tekrarlanmasını yukarıda yer alan kodlar sayesinde sağlamış bulunduk. Eğer yatay bir şekilde değilde dikey bir şekilde tekrarlanmasını istiyor isek bu sefer x olan yere “y” yazmamız dikey bir şekilde tekrarlanmasını sağlayacaktır. Fakat biz resmimizin hiç tekrarlanmasını değilde olduğu şekilde kalmasını istiyor olsaydık bu sefer ise “no-repeat” ‘ı kullanarak resmimizin ekranda dağılmadan tek bir şekilde karşımıza gelmiş olmasını sağlayacaktık.
CSS Arka Plan Resmi Konumu
Bir önce ki kodumuzda arka plan resmine bir tekrarlama biçimi yada tekrarlanmaması isteğimiz belli etmiştik. Şimdi ise bizler artık bu resmi sabitleyerek sürekli olarak orada kalmasını sağlayabiliriz.
<style>
body {
background-image: url("agac.png");
background-repeat: no-repeat;
background-position: right top;
}
</style>
Yukarıda ise artık sırasıyla gittiğimizi fark etmişsinizdir. Öncelikle arka plana bir resim ekledik. Daha sonrasında ise bu resmin tekrarlanmasını istemeyip position etiketi ile ‘de “right top” özelliğini vererek bu resmin sürekli olarak sağ üst kısımda bulunmasını sağlamış oluyoruz. Yani İngilizceden Türkçe ‘ye çevirecek olur isek temel olarak bildiğimiz sağ right, sol ise left etiketlerini ve üst alt olan top, bottom etiketlerini kullanarak bu arka plan resmine bir konum belirleyebiliriz.
CSS Arka Plan Resmi Sabitleme
Yukarıda artık oluşturmuş olduğumuz arka plana görsel ekleme, tekrarlama ve konum verme işlemlerini tamamladıktan sonrasında eğer HTML sayfanız aşağıya doğru uzun ise oluşturmuş olduğunuz bu resimde sürekli olarak aşağıya gelecektir. Fakat biz bu resmin sürekli olarak bir yerde kalmasını istiyor isek aslında yapacağımız işlem çok basittir.
<style>
body {
background-image: url("agac.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment : fixed;
}
</style>Artık biz arkaplan kısmının attachment özelliğine “fixed” yani yerinde çakılı değerini atamış bulunduk. Bu sayede biz scrool ile web sayfasından aşağıya indiğimizde resim sürekli olarak yukarıda ki koda yere sağ üst kısımda kalacaktır. Aksi halde biz bu kodu yazmamış olsaydık bu resim sağ üst tarafta sürekli olarak sayfayı indirsek bile orada yer alacaktır.