ستروکیت

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

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

اگر قرار باشد که تصویر پس زمینه برای کل مطالب باشد و هنگام اسکرول کردن سایت تصویر پس زمینه ثابت بماند، می‌توان این کار را به آسانی با استفاده از 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;
}