بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
خاصية background-color : نحدد بها لونا كخلفية وتأخذ قيمة إسم اللون أو رمزه بنظام hexadecimal أو نظام rbg كما هو معروف ورأيناه في درس الألوان في دورة html .
خاصية background-image : نحدد بها صورة كخلفية وتأخذ قيمة مسار الصورة واسمها وامتدادها .
لنجرب كود html التالي:
وكود css التالي:
وهذه هي النتيجة:
وضعنا اللون الرمادي كخلفية للصفحة ككل بتنسيق العلامة html ، ويمكن فعل ذلك مع العلامة body والنتيجة هي نفسها.
خاصية background-repeat : عندما تكون أبعاد الصورة أصغر من أبعاد العنصر المراد وضع هذه الصورة كخلفية له فإنه وبشكل افتراضي يحصل تكرار لهذه الصورة ، ويمكن التحكم في هذا التكرار باستخدام هذه الخاصية ، وهي تأخذ القيمة repeat وهي الإفتراضية أو القيمة no-repeat وتحذف التكرار أو القيمة repeat-x وهي التكرار في الإتجاه الأفقي فقط أو القيمة repeat-y وهو التكرار في الإتجاه العمودي فقط .
ليكن كود html التالي:
أولا سنضع الخلفيات:
والنتيجة:
وكما ترى الصور تكررت أفقيا وعموديا ، لم يظهر التكرار العمودي في الديفات الثلاث الأولى لأننا حددنا الإرتفاع في 150px .
والآن سنتحكم في هذا التكرار بكود css التالي:
والنتيجة :
خاصية background-position : على عكس الخاصية السابقة عندما تكون أبعاد العنصر أصغر من أبعاد الصورة المراد وضعها كخافية هنا يمكننا تحديد الجزء المطلوب من الصورة ، والخاصية نحدد في قيمتها موضع الصورة في الإتجاه الأفقي x وموضعها في الإتجاه العمودي y ، يمكن تحديد ذلك بالبكسل ولكنه موضوع متقدم سنشرحه في حينه ، وسنكتفي باستخدام القيم right و left و top و bottom و center.
لنجرب ذلك مع كود html التالي:
والتنسيق التالي:
لاعليك الآن من التنسيق الأخير الذي جمعت فيه كل الديفات ، استعملته فقط كي يساعد في التوضيح ، وهذه هي النتيجة:
وكما ترى الخلفية واحدة والوضعيات مختلفة.
خاصية background-attachment : خاصية جميلة جدا عندما تأخذ القيمة fixed فإنها تجعل الصورة الخلفية ثابتة لا تتحرك صعودا وهبوطا بعمل scrolling ، يمكنك تجربتها فهي سهلة جدا ، تحتاج فقط إلى صفحة مليئة بالنصوص حتى يظهر زر scroll ومن تم تضع صورة كخلفية للصفحة وتستخدم الخاصية وتلاحظ ، وستجد المثال مع ملفات الدرس.
ويمكن جمع كل ما سبق في قاعدة css واحدة وجامعة بهذه الطريقة :
حتى يمكنك إضافة اللون كخلفية يظهر في حال عدم ظهور الصورة لأي سبب من الأسباب .
موعدنا في الدرس القادم مع التفصيل في الأبعاد ، وفي انتظار ذلك أستودعكم الله تعالى.