Merhaba arkadaşlar, bu yazımda CSS ile ilgili olan projelerimizde sık sık karşılaşabileceğimiz tam ekran arka plan nasıl yapılır bunu anlatacağım.
Arka planın çözünürlüğü ve kullanıcının ekran çözünürlüğü ne olursa olsun arkaplanımızın sayfayı tamamen kaplaması gerekmektedir.
Bunun için birkaç yol olsada basit bir şekilde bu işlemimizi gerçekleştireceğiz.Dilerseniz hemen derse geçelim;
1. Örnek:
html { background: url(resimyolu) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
Demo için buraya tıklayınız.
Bu örnek ile standart bir şekilde istediğimiz yapıya ulaşabiliriz.
2. Örnek:
HTML
CSS
#web-bg { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; } #web-bg img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%; }
Demo için buraya tıklayınız.
Bu örnek ile html yapısı oluşturarak ve img tagına verdiğimiz arka plan ile tam ekran arka plan görünümünü elde edebiliriz.
Bu örneklerden alternatif başka örneklerde var fakat ben yazımda bu ikisine değinmek istedim.Önerdiğim ve standart örnek ise ilk örnektir.Genellikle sitelerde de zaten ilk örnek kullanılır.
Başka örneklerde incelemek istiyorsanız benimde yararlandığım buradaki siteyi inceleyebilirsiniz.
Doğan Deniz Çam
6 yıl önceKıskandım temalarını bro
Emre Ceyhan | Admin
6 yıl önceBence gereği yok, güzel bir tema istiyorsan yardımcı olurum sana skype dan eklersen :)
İsmail Can Demir
5 yıl önceÖncelikle teşekkür ederim paylaşım için.Benim takıldığım bir nokta var ; sayfaya 1.seçenekteki gibi arkaplan verdiğimde mobilde resmin sadece orta kısmı çıkıyor dolayısıyla resmin bir parçası gözüktüğünden hoş durmuyor.Bunu nasıl düzeltebilirim. Teşekkür ederim.
Emre Ceyhan | Admin
5 yıl önceKodları iyi inceleyin, örneğin background elementinin içinde ki değerlerin şöyle olmasına dikkat edin no-repeat center center fixed .
Şayet fixed olmazsa dediğiniz gibi arkaplan resmi ortalı olarak yarım duracaktır.
Aziz Caliskan
5 yıl önceBen bilişim öğrencisiyimde web gibi derslere merakım var bana ders verebilirmisin ??
Olcay E.
4 yıl önceselamun aleyküm, yararlı bir css dersi