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

بسم الله الرحمان الرحيم

دورة تصميم المواقع ب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  تلقائيا

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

أو إن لديك أسئلة اطرحها في الأسفل