CSS background-Attachment

-

في هذه الخاصية يتم التحكم بالخلفية بحيث يمكن تثبيتها بمكان ولن تتحرك ابدا في حال عمل scroll للصفحة او إمكانية تحريك الصورة مع scroll للصفحة. 

طريقة الكتابة: 

background-attachment: scroll | fixed | local | initial | inherit;


 هذه القيم تم شرحها بالتفصيل في اخر الدرس 


تمام حتى نفهم أكثر نطبق مثال عملي: 


تمام نرجع للملف backgroundcolor نعدل على الكود الي:


<!DOCTYPE html>
<style>
body {
  background-image: url("img/bellAlert.gif");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}
</style>
<html>
<body>
    <div>
        
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
        <p> background-attachment: fixed تطبيق </p>
    </div>
    
    <footer></footer>
</body>
</html>



شغل الصفحة وشوف النتيجة:


 


حاول تنزل بالصفحة الى الأسفل اكيد بكون الجرس ثابت بمكان لا يتغير بسبب استخدام الامر : 


background-attachment: fixed;


طيب نحاول نغير الخاصية من fixed الى Scroll بحيث يكون الكود :


body {
  background-image: url("img/bellAlert.gif");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: scroll;
}



CSS background-attachment Property

القيم المتوفرة في هذه الخاصية هي 


القيمة 
الوصف
scroll
الصورة في الخلفية متحركة مع الصفحة. هذا هو الافتراضي
fixed
الصورة في الخلفية ثابته لن تتحرك مع الصفحة
local
الصورة في الخلفية متحركة مع محتويات العنصر
initial
يتم تطبيق القيمة الافتراضية. 
inherit
يرث هذه الخاصية من parent element.