CSS İle Tam Ekran Arka Plan Yapımı  CSS İle Tam Ekran Arka Plan Yapımı | Googleda Görüntüle

CSS İle Tam Ekran Arka Plan Yapımı
 BEĞEN
  YORUM YAP

WallpaperPlay | Ücretsiz HD Masaüstü ve Mobil Wallpaper Duvar Kağıdı

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.

Etiketler

Yorumlar

Bu Konuya Ait 3 Onaylı Yorum Bulunuyor.

Doğan Deniz Çam

Doğan Deniz Çam

  1 yıl önce

Kıskandım temalarını bro

Emre Ceyhan

Emre Ceyhan | Admin

  1 yıl önce

Bence gereği yok, güzel bir tema istiyorsan yardımcı olurum sana skype dan eklersen :)

İsmail Can Demir

İsmail Can Demir

  6 ay ö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

Emre Ceyhan | Admin

  6 ay önce

Kodları 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

Aziz Caliskan

  1 ay önce

Ben bilişim öğrencisiyimde web gibi derslere merakım var bana ders verebilirmisin ??

Yorum Yap

3. İndir.com Mobil Uygulama Yarışması ABD'ye Götürüyor

İNDİR.COM MOBİL UYGULAMA YARIŞMASI ABD’ YE GÖTÜRÜYOR Geçtiğimiz ik...

  790   10 ay önce

CSS [ text-transform:uppercase ] Karakter Sorunu Çözümü

Css'de metin (text) biçimlendirme özelliklerinden biri olan text-transform:uppercase parametresini...

  2882   1 yıl önce

Input Değerlerini Ön Belleğe Alma [ localStorage ]

Bir form doldurma esnasında tarayıcının yanlışlıkla veya herhangi bir hata sonucu kapanması...

  1540   1 yıl önce

Javascript İle Upload Öncesi Görselleri Önizlemek

Bir çok yerde elbet karşınıza çıkmıştır, bir fotoğraf yüklüyorsunuz ve seçtiğiniz and...

  2270   1 yıl önce

Engin Pala 2 hafta önce demiş ki;


Teşekkür ederim ben işe koyuluyorum o zaman :D
Yoruma Git

Engin Pala 2 hafta önce demiş ki;


Merhaba Emre bey döviz kurlarının sürekli değişmesi mümkün mü yani anlık olarak nasıl çe...
Yoruma Git

Misafir 2 hafta önce demiş ki;


hocam bilgi için teşekkürler
Yoruma Git

sadık ikinci 1 ay önce demiş ki;


Emre bey, sizin kodlar ile merkez bankasından döviz değeri çekip, sitede para birimi dönüştü...
Yoruma Git