13 Haziran 2013

Css3 İle Tam Ekran Background Yapımı

Sayfamızı hazırlarken arka plan resmi eklediğimizde bu resmin sayfaya tam olarak oturmasını isteriz. Tüm kullanıcıların ekran boyutlarının aynı olmadığını düşündüğümüzde eğer tarayıcımızın %100 lük kısmını kullanan bir sayfamız var ise arka plan resmimizin sayfaya tam oturması gerekir. 

Html5 ile gelen yenilikler sayesinde görsel olarak tasarımlarımızın neredeyse hepsini Css üzerinden yaptığımızı unutmamalıyız. Sayfamızın arka plan resmini oluşturuken body tagımıza css kuralı atıyoruz. Bu Css kuralımızda sayfamız ekrana tam olarak sığacağından Margin ve Padding özelliklerine 0 px vermeyi unutmamalıyız. Arka plan resmimizi tanımladıktan ve tüm istediğimiz ayarları yaptıktan sonra resmimizin sayfaya tam olarak sığmasını sağlayacak bir kaç satır kod yazma işimiz kalmış olacak.

Yazmamız gerekn kodlar şunlardır;

body {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin:0px;
padding:0px;
}

Body tagımıza eklediğimiz kodlarla birlikte body tagımız için Css kuralımız hemen hemen böyle görünecektir.

3 yorum:

  1. kodu yazıyorum ama arka plan background kayboluyor nesneler %100 oluyor ama

    YanıtlaSil
    Yanıtlar
    1. Kodlarda bir sorun görünmüyor body etiketine gösterildiği gibi eklendiğinde background image tam sayfa olarak görünüyor olması gerekmekte. Dilerseniz kodlarınızı iletişimden gönderebilirsiniz birlikte düzeltme yada bir hata varsa değiştirme yapabiliriz.

      Sil

© 2013 iPRESS. All rights resevered. Designed by Templateism