بسم الله الرحمان الرحيم
دورة تصميم المواقع بCss الدرس الثالث
يوفر css عدة أنواع من الخصائص التي توفر التحكم بخلفيات العناصر وأنواعها مما يقلل من الحاجة الى استهلاك الموقع للموارد عن طريق استخدام الصور بكثرة في التصميم .
أهم هذه الأنواع هي :
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
وسنقوم بشرحها عنصرا عنصرا كما يلي :
background-color
هذه الخاصية تقوم باختيار لون الخلفية للعنصر المحدد مثل :
هذه الخاصية تقوم بوضع صورة على شكل خلفية للعنصر ويتم استخدامها كما يلي :
نلاحظ أننا نقوم باستخدام خاصية url لتحديد مكان الصورة التي سنستخدمها كخلفية للعنصر . يتم تحديد رابط الصورة انطلاقاً من ملف الستايل الذي قمنا باستدعائها في داخله .
background-repeat
تأتي هذه الخاصية مترافقة مع الخاصية السابقة ومهمتها تكرار الصورة في حال لم تملأ الصورة المساحة المحددة ، وتأخذ عدة قيم منها no-repeat أي لا تكرر أي شيء مهما ، وكرر طوليا repeat-y ، أو كرر عرضياً : repeat-x
background-attachment
خاصية شهيرة ولها عدة قيم أكثرها استخدماً ، fixed أي اجعل الصورة ثابتة في موضعها ، فلو تم عمل سكرول لأسفل أو لأعلى ستبقى الخلفية في مكانها من الصفحة ، فلو كانت بالمنتصف ستبقى بالمنتصف .
background-position
تستخدم لتحديد موضع الخلفية بالنسبة للعنصر الذي حددت لأجله وتأخذ قيم مثل :
right اي اجعل الخلفية في بداية العنصر من اليمين ، top أي اجعل العنصر في بداية العنصر من الأعلى ومثل ذلك جميع الجهات .
أمثلة على الدرس :
صورة الشجرة في الصورة هي خلفية تم تحديدها لجسم الصفحة body وتم تحديد الخصائص التالية :
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
مثال لخلفية مع خاصية تكرار background-repeat لم يتم تحديد قيمة فتم تحديد القيمة الافتراضية repeat تلقائيا
انتهى الدرس لمزيد من المعلومات يمكنكم مراسلتنا عبر بريد المداونة
أو إن لديك أسئلة اطرحها في الأسفل
