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)

css-tam-ekran-background

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%;
}

Yorumlar

  1. veysel

    bu eklediğimiz arka plan resmine link nasıl eklenir. yani demek istediğim arka plan resmine tıkladığımızda belirlediğimiz bir link açılsın istiyorum. bunu yapabiliyormuyuz.

veysel için bir yanıt yazın Yanıtı iptal et

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

back to top
Araç çubuğuna atla