CSS İLE TAM EKRAN ARKA PLAN YAPIMI


Bu yazımızda CSS ile alakalı olan projelerimizde hemen hemen sürekli karşılaşabileceğimiz tam ekran arka plan nasıl yapılır bunu anlatacağız.

Arka planın çözünürlüğü ve kullanıcının ekran çözünürlüğü ne olursa olsun arkaplanımızın sayfayı tamamıyla kaplaması gerekmektedir.
Bunun amacıyla birkaç yol olsada kolay bir şekilde bu işlemimizi gerçekleştireceğiz.Dilerseniz derhal 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;
}

Bu demo ile standart bir şekilde istediğimiz yapıyı oluşturabiliriz.

2. Örnek:

<div id=”web-bg”>
<img src=”resimyolu” alt=””>
</div>

#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%;
}

Bu numune ile html yapısı yaratarak ve img tagına sunduğumuz arka plan ile tam ekran arka plan görünümünü elde edebiliriz.

Bu numunelerden seçenek diğer numunelerde var lakin ben yazımda bu ikisine değinmek istedim.Önerdiğim ve standart numune ise ilk numunetir.Genellikle sitelerde de esasen ilk numune kullanılır.

Başka numunelerde incelemek istiyorsanız benimde yararlandığım buradaki siteyi inceleyebilirsiniz.

Yorum Yap