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.