CSS ile Arkaplan Resmini Pencere Boyutlarına Göre Ayarlamak



Gönderen: Mert Diricanli Tarih: Ağu 2, 2010 Kategori: Yazılım | 4 yorum

Uzun zamandır arkaplan resminde İstanbul’un eşsiz fotoğraflarından birinin bulunduğu bir site tasarlamak istiyordum. Bir süre önce can sıkıntısından bir tasarım yapıp öylece bırakmıştım. Bu tasarımı kodlama fırsatını da anca dün bulabildim. Sitemin anasayfasını dün akşam itibariyle güncelledim ve bunu yaparken internetteki yabancı kaynaklardan da oldukça yararlandım.

Karşılaştığım sorunlardan biri ve benim için en önemlisi arka plan resminin, tarayıcının pencere boyutlarına göre değişmesini sağlamaktı. Bu problemi aştıktan sonra da burada paylaşmanın yararlı olabileceğini düşündüm. Bunu nasıl yapabileceğimize göz atalım:

1. Öncelikle css dosyamızda <html> ve <body> etiketlerimizin şu şekilde kodlanması gerekiyor.


<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>

2. HTML kodlarınıza, sayfanızın ilk elemanı olarak istediğiniz bir arka plan resmini ekleyin.


<body>
<img src="bg.jpg" />
</body>

3. Daha sonra stil dosyanızda arkaplan resminizi aşağıdaki şekilde stillendirmelisiniz.


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

4. Arkaplan resmini tamamladık, geri kalan içeriğin arkaplan resminin üzerinde, bozulma olmadan görüntülenebilmesi için HTML kodlarınızı bir <div> etiketi arasına alabilirsiniz. Ancak stil dosyasında 5. adımdaki gibi bir değişiklik yapmanız gerekecek.


<div id="content">Sayfanızın bütün içeriği buraya gelecek.</div>

5. Son olarak content idli div için yazmanız gereken css kodlarını ekledikten sonra işlem tamam.


#content {
position:relative;
z-index:1;
}

Sayfanızı bu şekilde kodladıktan sonra browserların genelinde sorunsuz olarak görünecektir. ‘Genelinde’ diyorum çünkü Internet Explorer için bu işe yaramıyor. Internet Explorer‘da olan hataları gidermek için de aşağıdaki kodları sayfanızın <head> etiketleri arasına eklemeniz gerekiyor.


<!--[if IE 6]>

<style>

html { overflow-y: hidden; }
body { overflow-y: auto; }
#bg { position:absolute; z-index:-1; }
#content { position:static; }

</style>

<![endif]-->

Internet Explorer’la ilgili bu sorunu da giderdikten sonra, sayfanızın geri kalan kodlamasını idsi content olan <div> etiketinin arasına yazabilirsiniz. İyi çalışmalar.

Bir de bunlara göz atın:



4 Yorum

  1. 28-08-2010
    Burak s. Vanlı says:

    Teşekkürler Mert, benimle birlikte çoğu kişinin merak ettiği bir olay. Sırf çözünürlük farkları yüzünden site arkaplanı kullanmaktan çekinen arkadaşlar var.

    reply
  2. 15-08-2011
    Ercan says:

    Çok teşekkürler uygun zamanımda deneyeğim Ellerinize Sağlık :)

    reply
  3. 11-10-2011
    Ender says:

    Merhabalar, sayenizde arkaplanı tek resim olarak ayarlayabildim ancak bir sorunum var. IE 6 da content alanı arkaplanın altında görünüyor. Ne yaptıysam üstüne çıkaramadım. Paylaştığınız kodları uyguladım olmayınca üzerinde değişiklikler yaptım ancak hala aynı sorun devam ediyor.

    reply
    • 11-10-2011
      Mert Diricanlı says:

      IE 6 için yazılmış kod bloğunu da eklediniz mi tag’leri arasına?

      Eğer sorunu çözmüyorsa mert@mertdiricanli.com adresine ilgili sayfayı gönderin, uygun zamanımda sorunu çözmeye çalışalım.

      reply

Yorum Bırakın