CSS Tam Ekran ve Sabit Arkaplan (Background) Belirleme

Web sitenizin, blogunuzun arkaplanında tek bir renk kullanmak yerine bir resim kullanmayı tercih edebilirsiniz. Ben de şu an kullanmış olduğum temada, wallpaper olarak kullanıma sunulmuş olan ücretsiz bir resim dosyasını arkaplan olarak kullanmaktayım. Belirlediğim arkaplanın ekranın tamamını kaplamasını, farklı çözünürlüklerde boşluklar bulunmamasını ve sabit olmasını istiyordum. İnternette biraz araştırma yaparak istediğim sonuca ulaştım ve bu yöntemi sizinle paylaşmak istedim. Aşağıdaki kodları kullanarak sayfanıza ekranın tamamını kaplayan ve sabit (sayfa aşağı kaydıkça tekrarlanmayan) arkaplan ekleyebilirsiniz.

HTML / CSS Arkaplan Resmi Tekrarlanmasın (Resmi Sabitleme)

HTML kodunda yapmanız gereken tek şey resim dosyanız için bir id belirlemek. İşlemin zor bir yanı yok fakat yine de acemi okuyucularımız için değişiklik yapılması gereken yeri belirtelim. images/bg.jpg yazan bölüme resim dosyanızın adresini yazın. Aşağıdaki gibi bir kod oluşturmanız gerekiyor. Resmin sabitlenmesini sağlayan bölüm iste CSS kodunda yer alan position:fixed; satırı.

• Kullanmanız gereken HTML kodu şu şekilde.

<img src="images/bg.jpg" id="bg" alt="">

• CSS dosyanıza eklemeniz gereken kod ise şu şekilde.

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 
  min-width: 100%;
  min-height: 100%;
}