• Bu site çerezler kullanır. Bu siteyi kullanmaya devam ederek çerez kullanımımızı kabul etmiş olursunuz. Daha fazla bilgi edin.

Css Ve Javascript İle Tam Ekran Arkaplan Resmi Yapmak

Konuyu Okuyan Kişiler (0)

GüçNet

webmaster.tc
Katılım
6 Ağu 2012
Mesajlar
965
Beğeniler
0
Yaş
27
Konum
Akkapı
#1
Ö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
Katılım
1 Eyl 2012
Mesajlar
217
Beğeniler
0
#2
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
Katılım
6 Ağu 2012
Mesajlar
965
Beğeniler
0
Yaş
27
Konum
Akkapı
#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.