سلام

احتمالا تا به حال با مشکل پس زمینه بزرگ یا کوچک مواجه شده اید.یعنی یک عنصر مثل header با سایز متغییر دارید و برای آن یک عکس به عنوان پس زمینه قرار داده اید.حالا اگر وضوح صفحه نمایش کاربری بالا باشد،ممکن است تصویر شما را به صورت تکرار شده ببیند و اگر وضوح بیننده ای کم باشد،احتمالا بخش کوچکی از عکس را خواهد دید.حالا چه باید کرد؟

یکی از طراحان وب ایده جالبی ارائه داده است که مشکل را تا حدود زیادی حل می کند.بدین صورت که عکس شما چه از لحاظ طولی و چه عرضی،با توجه به وضوح صفحه نمایش و یا به عبارت بهتر با سایز مرورگر بیننده،تنظیم می شود تا در همه حال با کوچک و بزرگ کردن عکس،همواره کل عکس قابل مشاهده باشد.[امیدوارم توضیحم گیج کننده نباشد چون محشر توضیح دادم!]

برای این کار یک پلاگین کوچک برای jQuery نوشته شده است که به ترتیب زیر است:

/**
 * jQuery.fullBg
 * Version 1.0
 * Copyright (c) 2010 c.bavota - http://bavotasan.com
 * Dual licensed under MIT and GPL.
 * Date: 02/23/2010
**/
(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)

و مقدار کمی کد CSS لازم است:

.fullBg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
 
#maincontent {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
}

اگر می خواهید پس زمینه ثابت بماند،می توانید کد fullBg را به این شکل تغییر دهید:

.fullBg {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}

در HTML به هر تگ img می توان یک id به خصوص ارائه داد.همچنین به یک div برای نگهداری محتویات نیازمندیم و بدون آن کد ما درست کار نخواهد کرد.به صورت ساده کدی مثل این لازم داریم:

<img src="your-background-image.jpg" alt="" id="background" />
<div id="maincontent">
  <!-- Your site content goes here -->
</div>

برای فراخوانی تابع jQuery بایستی آن را به آخرین قسمت صفحه،یعنی درست قبل از تگ پایانی body،اضافه کنیم:

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

منبع