دورة تصميم المواقع بـ css الدرس الثالث | الخلفيات

بواسطة: محمد
القسم: دورة تعلم css3 من الصفر
25 مارس 2016

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

يوفر 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 تلقائيا

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

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

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