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

  8 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

  8 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

  3 ay önce

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

Yorum Yap

CSS3 -webkit / -moz / -o Nedir ? CSS3 ve Tarayıcı İlişkisi

Belki daha önce karşılaşmız olabilirsiniz.Bazı CSS3 kodları birkaç defa aynı yazılıp baş...

  782   1 ay önce

CSS3 Geçiş Efektleri - Transition Nedir? Nasıl Kullanılır?

Merhaba arkadaşlar, çoğu sitelerde gördüğümüz daha yumuşak ve animasyonlu şekilde geçiş ...

  477   1 ay önce

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...

  916   1 yıl önce

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

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

  3272   1 yıl önce

ömer güzelyurt 2 hafta önce demiş ki;


çok teşekkür ederim işime yaradı sağolsan :)
Yoruma Git

Mesut Hocaoglu 1 ay önce demiş ki;


İnternet ortamında " bu işin piriyim " diye geçinenlere nazaran kısa ve açıklayıcı anlatım...
Yoruma Git

Kutay Erten 1 ay önce demiş ki;


Kardeşim seni tebrik ediyorum bu kadar kısa bir kodu uzun uzun anlatmışşın , renk geçişleri...
Yoruma Git

Abdullah 1 ay önce demiş ki;


Teşekkürler:)
Yoruma Git