دورة تصميم المواقع بـ css الدرس الثالث | الخلفيات
دورة تصميم مواقع مقدمة من شركة سيريان كودرز لـ تصميم مواقع الويب .
يوفر css عدة أنواع من الخصائص التي توفر التحكم بخلفيات العناصر وأنواعها مما يقلل من الحاجة الى استهلاك الموقع للموارد عن طريق استخدام الصور بكثرة في التصميم .
أهم هذه الأنواع هي :
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
وسنقوم بشرحها عنصرا عنصرا كما يلي :
background-color
هذه الخاصية تقوم باختيار لون الخلفية للعنصر المحدد مثل :
background-image
هذه الخاصية تقوم بوضع صورة على شكل خلفية للعنصر ويتم استخدامها كما يلي :
نلاحظ أننا نقوم باستخدام خاصية 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 تلقائيا
انتهى الدرس لمزيد من المعلومات يمكنكم مراسلتنا عبر بريد الشركة
يمكنكم أيضا قراءة :