Css ile Tam Sayfa Arkaplan Nasıl Yapılır?

Tarayıcının boyutuna göre otomatik genişleyip daralabilen arkaplanları yapmak css ile mümkün. Bunu css’in background-size parametresi ile yapacağız. Ekran boyutunuz ne olursa olsun, hatta tarayıcınızı küçültüp büyüttüğünüzde arkaplanınız ekrana göre şekilleniyor ve sayfayı herhangi bir boşluk olmadan kaplamaya devam ediyor.

Html etiketine aşağıdaki kodları yazın.

html {
     background: url(bg.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
    background-size: cover;
}

Bu kodda bg.jpg kısmında arkaplana yüklemek istediğiniz imajın yolunu belirtin. Bu kodlarla otomatik olarak ekran boyutuna uyum sağlayan, esnek bir arkaplanınız olacak. Bu kodlar aynı zamanda arkaplan görselinin oranını koruyor ve görselin ortasını baz alarak boyutlandırma yapıyor. Scrollbar dediğimiz tarayıcının kaydırma çubuğu da bu kod özelliği sayesinde görünmüyor.

Popular Eğitimler

jQuery ve DrawSVG ile Hareketli SVG İkon Kullanımı

Web sitenizde hareketli SVG (animated SVG) kullanımı nasıl yapılır? Web sitelerinde göze…

CSS ile Padding ve Margin Kullanımı (Boşluklar)

CSS’te sayfa tasarlarken kullanılan boşluklar padding ve margin özellikleri ile verilir. Padding…

HTML ve CSS ile Mouse Hover Efekti Buton Animasyonu

Hareketli butonlar insanların ilgisini çekebilir. Fare imleci ile üzerine gelindiğinde ilgi çekici…

Mouse Hover ile Büyüyen Resim Efekti (CSS)

HTML ve CSS kullanarak, görsellerin üzerine geldiğimizde animasyonlu / hareketli bir şekilde…

Google Analytics.js ve Leverage Browser Caching Sorunu

Sitenizi GTMetrix veya Google PageSpeed gibi site hızı ölçen web sitelerinde test…

Google Web Fontları Nasıl Kullanılır?

Google web fontları nasıl kullanılır? Google web yazı karakterlerini sitemize nasıl ekleriz? Google Web fontlarının Türkçe desteği var mı?