دورة تصميم مواقع مقدمة من شركة سيريان كودرز لـ تصميم مواقع الويب .

يوفر css عدة أنواع من الخصائص التي توفر التحكم بخلفيات العناصر وأنواعها مما يقلل من الحاجة الى استهلاك الموقع للموارد عن طريق استخدام الصور بكثرة في التصميم .

أهم هذه الأنواع هي :

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

وسنقوم بشرحها عنصرا عنصرا كما يلي :

background-color

هذه الخاصية تقوم باختيار لون الخلفية للعنصر المحدد مثل :

background-color

 

background-image

هذه الخاصية تقوم بوضع صورة على شكل خلفية للعنصر ويتم استخدامها كما يلي :

background-image

نلاحظ أننا نقوم باستخدام خاصية url لتحديد مكان الصورة التي سنستخدمها كخلفية للعنصر . يتم تحديد رابط الصورة انطلاقاً من ملف الستايل الذي قمنا باستدعائها في داخله .

background-repeat

تأتي هذه الخاصية مترافقة مع الخاصية السابقة ومهمتها تكرار الصورة في حال لم تملأ الصورة المساحة المحددة ، وتأخذ عدة قيم منها no-repeat أي لا تكرر أي شيء مهما ، وكرر طوليا  repeat-y ، أو كرر عرضياً :  repeat-x

background-attachment

خاصية شهيرة ولها عدة قيم أكثرها استخدماً ، fixed أي اجعل الصورة ثابتة في موضعها ، فلو تم عمل سكرول لأسفل أو لأعلى ستبقى الخلفية في مكانها من الصفحة ، فلو كانت بالمنتصف ستبقى بالمنتصف .

background-position

تستخدم لتحديد موضع الخلفية بالنسبة للعنصر الذي حددت لأجله وتأخذ قيم مثل :

right اي اجعل الخلفية في بداية العنصر من اليمين ، top أي اجعل العنصر في بداية العنصر من الأعلى ومثل ذلك جميع الجهات .

أمثلة على الدرس : 

background-position

صورة الشجرة في الصورة هي خلفية تم تحديدها لجسم الصفحة body وتم تحديد الخصائص التالية :

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}

مثال لخلفية مع خاصية تكرار background-repeat  لم يتم تحديد قيمة فتم تحديد القيمة الافتراضية repeat  تلقائيا

 

repeat

 

انتهى الدرس لمزيد من المعلومات يمكنكم مراسلتنا عبر بريد الشركة

يمكنكم أيضا قراءة :

كتاب تعلم البوتستراب عربي

تاريخ تصميم المواقع

كيف تصمم موقع ناجح

تصميم مواقع تركيا

تصميم مواقع اسطنبول

تصميم مواقع اليمن