CSS İle Tam Ekran Arka Plan Yapımı  

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.