Css Ve Javascript İle Tam Ekran Arkaplan Resmi Yapmak

GüçNet

webmaster.tc
Üye
Katılım
6 Ağu 2012
Mesajlar
960
Yaş
29
Konum
Akkapı
Önce Html İle Arkaplan Resmini Çağırıyoruz.

HTML:
<img alt="Arkaplan" src="img/bg.png" id="bg" />
Sonra Javascript ve CSS İle Arkaplan Resmini Tam Sayfa Yapabilmek için Aşağıdaki Kodları Ekliyoruz.

Javascript Kodu

Kod:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function() {


 var bgImage = $('#bg');		
 
    function resizeImg() {
      var imgwidth = bgImage.width(),
		   imgheight = bgImage.height(),
		   winwidth = $(window).width(),
		   winheight = $(window).height(),
		   widthratio = winwidth / imgwidth,
		   heightratio = winheight / imgheight,
		   widthdiff = heightratio * imgwidth,
		   heightdiff = widthratio * imgheight;
 
      if(heightdiff>winheight) {
        bgImage.css({
          width: winwidth+'px',
          height: heightdiff+'px'
        });
      } else {
        bgImage.css({
          width: widthdiff+'px',
          height: winheight+'px'
        });		
      }
	 
	 $("#bg").show();
	  
    } 
    resizeImg();
    $(window).resize(function() {
      resizeImg();
    }); 



});

</script>
Css Kodu

Kod:
#bg{
	position:absolute;
	top:0;
	left:0;
	z-index:-10;
	overflow: hidden;
    width: 100%;
	display:none;
	}
İe'de bile çalışıyor :)
 

XFQ

webmaster.tc
Üye
Katılım
1 Eyl 2012
Mesajlar
216
Yalnız bu kodla resim 1 kez tekrar eder fakat veriler aşağı doğru devam ettiğinde ise resim durur. Orada ise
Kod:
#body {
background-color:#ffffff;
}
gibi devam ettirmek gerekir. Eğer diğer konunuzdaki gibi sadece tanıtım amaçlı pixelleri belli olan bir websitede buna ihtiyaç yoktur.
 

GüçNet

webmaster.tc
Üye
Katılım
6 Ağu 2012
Mesajlar
960
Yaş
29
Konum
Akkapı
  • Konu Sahibi Konu Sahibi
  • #3
Yalnız bu kodla resim 1 kez tekrar eder fakat veriler aşağı doğru devam ettiğinde ise resim durur. Orada ise
Kod:
#body {
background-color:#ffffff;
}
gibi devam ettirmek gerekir. Eğer diğer konunuzdaki gibi sadece tanıtım amaçlı pixelleri belli olan bir websitede buna ihtiyaç yoktur.
Bir kere tekrar etmesi için zaten bu kod. Sabit arkaplan, sadece içerik hareket ediyor.
 

Üst