background-attachment

ویژگی background-attachment رفتار تصویر پس زمینه را نسبت به اسکرول صفحه و عنصر کنترل می کند.

این ویژگی سه مقدار می پذیرد:

 

scroll

مقدار پیشفرض scroll می باشد که رفتار عادی تصویر پس زمینه را بوجود می آورد. یعنی تصویر عنصر نسبت به اسکرول خود عنصر که بر اثر سرریز محتوا بوجود می آید ثابت است اما نسبت به اسکرول Viewport ثابت نیست و حرکت می کند.

در مثال زیر زمانی که باکس داخلی را اسکرول می کنیم تصویر ثابت است اما زمانی که باکس بیرونی (مربوط به pen) را اسکرول می کنیم تصویر با عنصر حرکت می کند و از viewport خارج می شود.

See the Pen background-attachment: scroll by Mojtaba Seyedi (@seyedi) on CodePen.

 

fixed

مقدار پرکاربرد این ویژگی fixed می باشد که باعث می شود تا تصویر پس زمینه عنصر در ناحیه ترسیمش همیشه ثابت بماند و حتی اسکرول viewport هم تاثیری بر آن نداشته باشد.

 

header {
  background-attachment: fixed;
}

این بار اسکرول باکس بیرونی را حرکت دهید متوجه خواهید شد که تصویر پس زمینه ثابت خواهند ماند:

 

See the Pen background-attachment: fixed by Mojtaba Seyedi (@seyedi) on CodePen.

 

از این تکنیک برای بوجود آوردن افکت هایی نظیر دموی زیر در خیلی از سایت ها استفاده می شود:

 

See the Pen background-attachment: fiexed by Mojtaba Seyedi (@seyedi) on CodePen.

 

 

local

مقدار آخر local است که باعث می شود تا تصویر پس زمینه عنصر حتی نسبت به اسکرول مربوط به عنصر هم ثابت نباشد و حرکت کند:

 

header {
  background-attachment: local;
}

 

See the Pen background-attachment: local by Mojtaba Seyedi (@seyedi) on CodePen.

 

اگر چندین تصویر پس زمینه برای یک عنصر تعریف شده باشد می توان برای این ویژگی نیز چندین مقدار تعریف کرد فقط لازم است مقادیر را توسط ویرگول از هم جدا کنیم:

 

div {
  background-image: url(first.jpg), url(second.jpg);
  background-attachment: fixed, local;
}

 

 

پشتیبانی مرورگر ها