ستروکیت
Page Loder

چگونه می‌توان در وب یک تصویر را پس زمینه‌ی یک صفحه کامل قرار داد؟ پس زمینه را می‌توان برای کل مطالب سایت قرار داد و یا فقط برای بخشی از سایت که اندازه یک پنجره کامل است؟ برای پاسخ به این سوالات و نحوه اجرای آن در این مطلب همراه ما باشید.

تصویر پس زمینه برای کل مطالب

اگر قرار باشد که تصویر پس زمینه برای کل مطالب باشد و هنگام اسکرول کردن سایت تصویر پس زمینه ثابت بماند، می‌توان این کار را به آسانی با استفاده از CSS3 انجام داد. ویژگی background-size در CSS3 این امکان را می‌دهد تا تصویر پس‌زمینه کل صفحه را پوشش دهد. ما از تگ html استفاده می‌کنیم. 

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

<div id="bg" class="bg"></div>
<p>...</p>

این کار را می توان با استفاده از دو روش زیر انجام داد.

۱- با استفاده از CSS

عنصر div با کلاس bg قرار است دارای تصویر پس زمینه باشد و نیاز هست که ارتفاع آن را ۱۰۰ درصد height: 100% قرار دهیم. همچنین نیاز هست که در این روش ارتفاع body و html هم ۱۰۰٪ باشد.

body, html {
height: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
۲- با استفاده از JavaScript و CSS

در این روش با استفاده از جاوا اسکریپت ارتقاع پنجره مرورگر را محاسبه می‌کنیم و به div با آی دی bg می‌دهیم.

$(document).ready(function() {
function autoResizeDiv(){
document.getElementById('bg').style.height = window.innerHeight +'px';
}
autoResizeDiv();
})
 

اگر می‌خواهید هنگامی که اندازه پنجره مرورگر تغییر کرد دوباره اندازه جدید را بگیرد، خط زیر را به کد جاوا اسکریپت خود اضافه کنید.

window.onresize = autoResizeDiv;

و کد ‌CSS

.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

نوشتن دیدگاه

ورود به پنل کاربری
021-88748704
setrokate_support