کد تصاویر متغییر پشت زمینه
سوال جدیدسلام خسته نباشید
من یه کد دارم که تصاویر زمینه رو با هر بار رفرش کردن عوض میکنه
مشکل من با تصویر کامل زمینه هست یعنی با هر صفحه نمایش طبق همون تمام صفحه بشه
چجوری این کد رو باید تغییر بدم
کجاش؟
<script type="text/javascript">
// # of images
var imgCount = 3;
// image directory
var dir = '/images/';
// random the images
var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
// array of images & file name
var images = new Array
images[1] = "01.jpg",
images[2] = "02.jpg",
images[3] = "03.jpg",
document.body.style.backgroundImage = "url(" + dir + images[randomCount] + ")";</script>
</script>
برای درک بهتر نسبت به کدهای این دوست عزیز می تونید مقاله زیر رو مطالعه کنید.
با توجه به کد نوشته شده یک روش هم به این صورت است که یک سری ویژگی ها را برای پس زمینه تعیین کنید مثل
background-repeat ، background-position ، background-attachment و background-size که در این صورت خط آخر کدتون را می شه به این شکل نوشت ( تمام ویژگی ها با هم به صورت یک جا برای background تعیین شده است)
document.body.style.background = "url(' " + dir + images[randomCount] + "') no-repeat center / cover fixed " ;
همچنین می تونید هر یک از خصوصیت ها را به شکل جداگانه هم بنویسید به این صورت
document.body.style.backgroundImage = "url(' " + dir + images[randomCount] + "')";
document.body.style.backgroundSize = "cover";
document.body.style.backgroundAttachment = "fixed";
document.body.style.backgroundPosition = "center";
document.body.style.backgroundRepeat = "no-repeat";
این هم کد کامل
<script type="text/javascript">
// # of images
var imgCount = 3;
// image directory
var dir = "images/";
// random the images
var randomCount = Math.round( Math.random() * ( imgCount-1 ) )+1;
// array of images & file name
var images = new Array;
images[1] = "01.jpg";
images[2] = "02.jpg";
images[3] = "03.jpg";
document.body.style.background = "url(' " + dir + images[randomCount] + "') no-repeat center center / cover fixed " ;
</script>
البته می تونید این ویژگی ها را در فایل css تون به صورت کد های css هم بنویسید و دیگر نیازی به تغییرات کد بالا نیست که در این صورت فقط کد زیر را به فایلcss اضافه می کنید
body {
background-size: cover;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
}
برای اینکه همه تصاویر حالت repeat بگیرند میتونید از کد زیر استفاده کنید
body{
background-repeat: repeat !important;
}کافیه این کد رو در قسمت استایل ها قرار بدید.برای تعیین عرض کلی صفحه هم میشه از مدیا کوئری ها در css استفاده کرد.راجع به این موضوع داخل همین سایت آموزش داده شده.
اگر منظورتون اینه که در صفحه نمایش های مختلف مثل موبایل و لپ تاپ و تبلت تصویر زمینه درست نشون داده بشه باید width رو برای تمام این دستگاه ها ۱۰۰ درصد در نظر بگیرید و اینکه تصویر اگر کوچک هست از حالت repeat استفاده کنید .
تشکر دوست من