Css Fullscreen Background images(css ile tam ekran arka plan resmi)

Merhaba,

Bu yazımızda uzun zamandır yaygın olan ve genellikle ve sadece javascript veya yeni nesil sürümü olan jquery modülleri ile yapılabilen tam ekran ve kesinlikle her ekran modunda sabit kalan arka plan görseli oluşturma yolunu ele alacağız.Tabiki bu yöntemde ana elamanımız css olacak.Sadece css kodları ile çok basit olarak tam ekran arka plan resmini sizlerde web sayfalarınıza ekleyebilir ve kullanabilirsiniz.
Emrah Kozan/Web & Graphic instructor

 

 

1-Bunun için öncelikle bir arka plan resmi bulup css kodlarında  body elementine background özeliği yardımı ile sayfamıza ekleyelim.
body
{
background:url(yildizim.jpg);/*sonuç olarak arka plan resmimiz sayfamızda yer alacaktır*/
}

2.Şimdi sıra bu arka plan görselini farklı tarayıcıları da göz önüne alarak konumlandırmaya geldi.Bunun için yeni nesil css özelliklerini kullanacağız.

body
{
background:url(yildizim.jpg);


/*Aşağıdaki kodlar yardımı ile farklı bir çok tarayıcıda ark plan görselinin pencerenize tam olarak konumlandığını görebilirsiniz*/

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;;
}

Sonuç Olarak…

 

 

 

 

Emrah Kozan/Web & Graphic instructor
Aralık 2012

7 Responses to “Css Fullscreen Background images(css ile tam ekran arka plan resmi)

  • teşekkkürler

  • emeğine sağlık

  • Hocam css3 kodu bu yani haklısın güzel birşey fakat ie css3 desteklemiyor bu yüzden sağlıklı bir kodlama olmayacaktır. yinede paylaşım için teşekkürler ie ile ilgili sorunun çözümünü bulabilirsen bilgilendir sevinirim

    • Semih merhaba,
      haklısın eski sürüm ie bu kodu desteklemiyor ancak yeni sürüm özellikle 8 ve sonrasının desteklediğini görebilirsin zaten yakın bir zamanda 8 kullanan da kalmayacaktır çünkü microsoft,ie nin diğer tarayıcılara göre daha hızlı güncellenebilen bir ürün olacağını idda ediyor ne derece başarır bilemem ben ie 9 da bu kodu test ettim ve sonuç aldım;)

      • ben de bu kodu kullanıyorum. IE 11′de sonuç alamadım. arkaplan diğer tarayıcılarda ekranı kaplıyor ama IE’de ortada tek bir resim olarak duruyor (ben ayrıca center ve no-repeat etiketlerini de kullanıyorum)

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*

Şu HTML etiketlerini ve özelliklerini kullanabilirsiniz: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>