ویژگی background-attachment در CSS

background-attachment Property

ویژگی background-attachment در CSS مشخص می کند که تصویرِ پس زمینه بصورت fixed (ثابت) است و یا همراه با بلاک محتوا اسکرول می شود.

نحوه نوشتار

background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;

مقادیر

fixed​

پس زمینه در رابطه با viewport (محدوده دید) در مرورگر ثابت است. حتی اگر عنصر دارای مکانیسم اسکرول باشد، پس با آن حرکت نمی کند.

local​

پس زمینه در رابطه با محتوای عنصر ثابت است. اگر عنصر اسکرول شود، پس زمینه نیز همراه با محتوای عنصر اسکرول می شود.

scroll​

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

در مثال زیر نحوه عملکرد این مقادیر و ترکیبی از آنها را در ویژگی background-attachement میبینیم:

html

<section>
    <div class="fixed">
        لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و
        بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک
        از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه
        شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی
        نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک
        ....
    </div>
    <div class="scroll">
        لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و
        بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح گرافیک
        از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و ارایه اولیه
        شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا از نظر گرافیکی
        نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد. معمولا طراحان گرافیک
        ....
    </div>
</section>

css

 section {
    display: flex;
    justify-content: space-around;
    direction: rtl;
    font-family: "segoe ui";
    height: 200px;
    overflow: auto;
}
div {
    max-width: 330px;
    height: 450px;
    background-image: url("http://my-project.ir/img/nature.jpg");
    background-repeat: no-repeat;
    color: #ffffff;
    text-shadow: 0 2px 5px #000;
}
.fixed {
    background-attachment: fixed;
}
.scroll {
    background-attachment: scroll;
}
</style>

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی CSS پشتیبانی می کنند.