سلام
احتمالا تا به حال با مشکل پس زمینه بزرگ یا کوچک مواجه شده اید.یعنی یک عنصر مثل 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>
در بعضی سایتها دیده بودم به این شکل عمل میکنند اما نمیدونستم چطوری!
عالی بود علی جان، ممنونم… 🙂
دستتون بی بلا من خیلی به این امکان نیاز داشتم خیلی عالیه.
یه چیزی سایز تصویر مهم نیست . برای مثلا رزولوشن های فول اچ دی چه رزولوشنی بزاریم بهتر جواب میگیریم
سلام
ممنونم ، برای Full HD معمولا 1920*1080 کافیه
سلام
خسته نباشی دلاور – سایت شما رو تو قسمت پیوندهای سایت خودم میذارم
فعلا
سلام آقای بجانی عزیز
خوبین ؟ متشکرم باعث افتخاره .با اجازه تون من هم لینک می کنم شما رو
خوشحال تر میشم بازم سر بزنید به ما ^.^
ارادتمندم
Thanks for writing such an easy-to-understand artilce on this topic.
این کار را بدون jquery هم می شد انجام داد. من یک پروژه داشتم ولی باید عکست انقدر بزرگ باشه که تا وقته کشیده می شه، تار نشه
اگر بدون جی کو رو هم بفرمایید ممنون میشم .