من التقينات الجميلة في عالم الـ CSS أسلوب وضع خلفيات صورية ثابته لصفحتك مما يعطيها رونقاً خاصاً و فريدأ. هنا نستعرض عدداً من هذه التقنيات الجميله عل أحدها تناسب احتياجاتك في التصميم

الطريقة الأولى

IE 6
IE 9+
Firefox 4+
Chrome

<style type="text/css">

/* pushes the page to the full capacity of the viewing area */
html {height:100%;}
body {height:100%; margin:0; padding:0;}
/* prepares the background image to full capacity of the viewing area */
#bg {position:fixed; top:0; left:0; width:100%; height:100%;}
/* places the content ontop of the background image */
#content {position:relative; z-index:1;}
</style>
<!--[if IE 6]>
<style type="text/css">
/* some css fixes for IE browsers */
html {overflow-y:hidden;}
body {overflow-y:auto;}
#bg {position:absolute; z-index:-1;}
#content {position:static;}
</style>
<![endif]-->
</head>

<body>
<div id="bg"><img src="yourimage.jpg" width="100%" height="100%" alt=""></div>
<div id="content"><p>Enter a ton of text or whatever here.</p></div>
</body>

/* pushes the page to the full capacity of the viewing area */

html {height:100%;}

body {height:100%; margin:0; padding:0;}

/* prepares the background image to full capacity of the viewing area */

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

/* places the content ontop of the background image */

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

</style>

<!--[if IE 6]>

/* some css fixes for IE browsers */

html {overflow-y:hidden;}

body {overflow-y:auto;}

#bg {position:absolute; z-index:-1;}

#content {position:static;}

</style>

<![endif]-->

</head>

<body>

<div id="content"><p>Enter a ton of text or whatever here.</p></div>

</body>

الطريقة الثانية

IE 6
IE 9+
Firefox 4+
Chrome

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

html {

background: url(images/bg.jpg) no-repeat center center fixed;

-webkit-background-size: cover;

-moz-background-size: cover;

-o-background-size: cover;

background-size: cover;

}

الطريقة الثالثة

IE 6
IE 9+
Firefox 4+
Chrome

<style type="text/css">
img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
  z-index : -1;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

@media screen and (max-width: 1024px) { /* Specific to this particular image */
  img.bg {
    left: 50%;
    margin-left: -512px;   /* 50% */
  }
}
</style>
</head>
<body>
<img src="bg.jpg" class="bg">
<div id="content"><p>Enter a ton of text or whatever here.</p></div>
</body>

img.bg {

/* Set rules to fill background */

min-height: 100%;

min-width: 1024px;

z-index : -1;

/* Set up proportionate scaling */

width: 100%;

height: auto;

/* Set up positioning */

position: fixed;

top: 0;

left: 0;

}

@media screen and (max-width: 1024px) { /* Specific to this particular image */

img.bg {

left: 50%;

margin-left: -512px; /* 50% */

}

</style>

</head>

<body>

<div id="content"><p>Enter a ton of text or whatever here.</p></div>

</body>

الطريقة الرابعة

IE 6
IE 9+
Firefox 4+
Chrome

ننشئ دالة في ملف fullBg.js

(function($) {
  $.fn.fullBg = function(){
    var bgImg = $(this);		

    function resizeImg() {
      var imgwidth = bgImg.width();
      var imgheight = bgImg.height();

      var winwidth = $(window).width();
      var winheight = $(window).height();

      var widthratio = winwidth / imgwidth;
      var heightratio = winheight / imgheight;

      var widthdiff = heightratio * imgwidth;
      var heightdiff = widthratio * imgheight;

      if(heightdiff>winheight) {
        bgImg.css({
          width: winwidth+'px',
          height: heightdiff+'px'
        });
      } else {
        bgImg.css({
          width: widthdiff+'px',
          height: winheight+'px'
        });		
      }
    } 
    resizeImg();
    $(window).resize(function() {
      resizeImg();
    }); 
  };
})(jQuery)

(function($) {

$.fn.fullBg = function(){

var bgImg = $(this);

function resizeImg() {

var imgwidth = bgImg.width();

var imgheight = bgImg.height();

var winwidth = $(window).width();

var winheight = $(window).height();

var widthratio = winwidth / imgwidth;

var heightratio = winheight / imgheight;

var widthdiff = heightratio * imgwidth;

var heightdiff = widthratio * imgheight;

if(heightdiff>winheight) {

bgImg.css({

width: winwidth+'px',

height: heightdiff+'px'

});

} else {

bgImg.css({

width: widthdiff+'px',

height: winheight+'px'

});

}

resizeImg();

$(window).resize(function() {

resizeImg();

});

};

})(jQuery)

و من ثم نستخدمها

<script src="jquery-1.8.1.min.js"></script>
<script src="fullBg.js"></script>

<script type="text/javascript">
$(window).load(function() {
	$("#background").fullBg();
});
</script>

<style>
 body
 {
  padding : 0px;
  margin : 0px;
 }
.fullBg {
  position: absolute; /* set to fixed position: fixed; */
  top: 0;
  left: 0;
  overflow: hidden;
}

#maincontent {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
}
</style>
</head>

<body>
<img src="bg.jpg" alt="" id="background" />
<div id="maincontent">
  <p>I am here !!!</p>
</div>
</body>

$(window).load(function() {

$("#background").fullBg();

});

</script>

<style>

body

{

padding : 0px;

margin : 0px;

}

.fullBg {

position: absolute; /* set to fixed position: fixed; */

top: 0;

left: 0;

overflow: hidden;

}

#maincontent {

position: absolute;

top: 0;

left: 0;

z-index: 50;

}

</style>

</head>

<body>

</div>

</body>

DevDose

تطوير أكثر

Widgets

Search

دليلك لتعيين خلفية ثابتة لصفحتك

الطريقة الأولى

الطريقة الثانية

الطريقة الثالثة

الطريقة الرابعة

أضف تعليقاً إلغاء الرد