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 پشتیبانی می کنند.