خصائص الخلفيات
أي عنصر تضعه في الصفحة يمكنك تحديد لون خلفيته، وضع صورة كخلفية له، تحديد حجم و مكان الصورة التي تم وضعها كخلفية له، جعل صورة الخلفية تتكرر أو تتمدد بالشكل المناسب.
في هذا الدرس ستتعرف على الخصائص التالية التي تستخدم في تصميم خلفية العناصر:
background-color
background-image
background-repeat
background-position
background-attachment
background
فيما يلي أسماء الصور التي سنستخدمها في الأمثلة و بأحجامها الفعلية.

paper.png

gradient.png

pyramids.png

moon.png
تحديد لون خلفية العنصر
لتلوين خلفية العنصر نستخدم الخاصية background-color
و اللون نضعه لها كقيمة من خلال إسمه ( Color Name ) أو بتحديد درجته بأسلوب HEX أو RGB أو RGBA أو HSL أو HSLA كما تعلمنا في درس الألوان.
فيما يلي قمنا بتلوين خلفية الصفحة و خلفية العناصر الموجودة فيها.
مثال
body {
background-color: lightblue;
}
h1 {
background-color: burlywood;
}
p {
background-color: darkgray;
}
جرب الكود
تحديد شفافية الخلفية
إذا أردت التلاعب بشفافية ( Transparency أو Opacity ) العنصر فهنا عندك خيارين:
- إستخدام الخاصية
opacity
و عندها سيتم جعل العنصر بأكمله شفاف، أي الشفافية ستطبّق على الكلام و الخلفية معاً.
- تحديد درجة اللون و شفافية الخلفية معاً بأسلوب RGBA أو HSLA و هكذا ستطبّق الشفافية على الخلفية فقط.
فيما يلي الشفافية مطبقة على العنصر بأكمله.
Opacity 1
Opacity 0.7
Opacity 0.4
فيما يلي الشفافية مطبقة على خلفية العنصر فقط.
Alpha 1
Alpha 0.7
Alpha 0.4
تطبيق الشفافية على العنصر بأكمله
في المثال التالي قمنا بتلوين جميع عناصر <h1>
الموجود في الصفحة بالأزرق.
بعدها قمنا بإعطاء بإعطاء شفافية للعناصر على الشكل التالي:
- أي عنصر
<h1>
يستخدم الكلاس first
سيتم إعطاؤه شفافية بنسبة 0.8.
- أي عنصر
<h1>
يستخدم الكلاس second
سيتم إعطاؤه شفافية بنسبة 0.5.
- أي عنصر
<h1>
يستخدم الكلاس third
سيتم إعطاؤه شفافية بنسبة 0.2.
مثال
h1 {
background-color: blue;
}
h1.first {
opacity: 0.8;
}
h1.second {
opacity: 0.5;
}
h1.third {
opacity: 0.2;
}
جرب الكود
تطبيق الشفافية على خلفية العنصر فقط
في المثال التالي قمنا بتلوين خلفية جميع عناصر <h1>
الموجود في الصفحة بالأزرق مع تحديد نسبة شفافيتها بأسلوب RGBA على الشكل التالي:
- أي عنصر
<h1>
ستكون خلفيته زرقاء و شفافة بنسبة 1، بمعنى أنه لا يملك أي شفافية.
- أي عنصر
<h1>
يستخدم الكلاس first
ستكون خلفيته زرقاء و شفافة بنسبة 0.8.
- أي عنصر
<h1>
يستخدم الكلاس second
ستكون خلفيته زرقاء و شفافة بنسبة 0.5.
- أي عنصر
<h1>
يستخدم الكلاس third
ستكون خلفيته زرقاء و شفافة بنسبة 0.2.
مثال
h1 {
background-color: rgba(0, 0, 255, 1);
}
h1.first {
background-color: rgba(0, 0, 255, 0.8);
}
h1.second {
background-color: rgba(0, 0, 255, 0.5);
}
h1.third {
background-color: rgba(0, 0, 255, 0.2);
}
جرب الكود
إضافة صورة كخلفية
لإضافة صورة كخلفية للعنصر نستخدم الخاصية background-image
و من ثم نمرر لها مسار الصورة عن طريق الدالة url('')
التي نضعها لها كقيمة.
إفتراضياً عند إضافة صورة كخلفية سواء لعنصر محدد أو للصفحة بأكملها فإنها تظل تكرر نفسها حتى تملئ كل خلفية الشيء الموضوعة فيه و لكنك بالطبع تستطيع تحديد مكان ظهورها، جعلها تتمدد لتملئ المساحة المخصصة للعنصر، جعلها لا تتكرر أكثر من مرة أو جعلها تكرر فقط بالطول أو العرض على حسب حاجتك.
في المثال التالي وضعنا الصورة paper.png
كخلفية للصفحة، أي سنضعها كخلفية للوسم <body>
.
لاحظ كيف أنها ستظل تكرر نفسها حتى تملئ كل الشاشة.
مثال
body {
background-image: url('paper.png');
}
جرب الكود
ملاحظة
إذا قمت بوضع صورة و لم تظهر، فهذا يعني أن طريقة وضعك للرابط غير صحيحة.
تحديد إتجاه تكرار صورة الخلفية
لتحديد كيف ستكرر صورة الخلفية نفسها أو لمنعها من تكرار نستخدم الخاصية background-repeat
و من ثم نمرر لها إحدى القيم التالية:
no-repeat
إذا أردنا جعلها لا تكرر نفسها.
repeat-x
إذا أردنا جعلها تكرر أفقياً فقط.
repeat-y
إذا أردنا جعلها تكرر عمودياً فقط.
في المثال التالي وضعنا الصورة gradient.png
كخلفية للعنصر <header>
مع جعلها تتكرر أفقياً.
مثال
header {
background-image: url('gradient.png');
background-repeat: repeat-x;
}
جرب الكود
ملاحظة
في المثال السابق يوجد مشكلة و هي أنه في حال كان حجم الوسم بالطول أكبر من خلفيته فإنها لن تتمدد معه و سبب ذلك أننا لم نجعل الخلفية مطابقة لحجم العنصر الموجودة فيه.
تحديد حجم صورة الخلفية
لتحديد حجم صورة الخلفية بالنسبة للعنصر الموضوعة فيه نستخدم الخاصية background-size
و من ثم نمرر لها إحدى القيم التالية:
auto
هي القيمة الإفتراضية و التي تجعل الصورة تظهر بحجمها الحقيقي.
contain
تجعل الصورة تظهر بالكامل بدون قطع أي جزء منها و تحاول مطابقة حجمها مع حجم العنصر.
w% h%
هنا نقصد تمرير رقم مئوي يمثل كم نريد أن يكون عرض الصورة بالنسبة للعنصر و طولها سيتم تحديده بشكل تلقائي. و يمكنك تمرير رقمين مئويين لها إن أردت، الأول يمثل عرض الصورة و الثاني طولها.
w-unit h-unit
هنا نقصد تمرير رقم بوحدة قياس محددة مثل px يمثل كم نريد أن يكون عرض الصورة بالنسبة للعنصر و طولها سيتم تحديده بشكل تلقائي. و يمكنك تمرير رقمين لها إن أردت، الأول يمثل عرض الصورة و الثاني طولها.
في المثال التالي وضعنا الصورة gradient.png
كخلفية للعنصر <header>
مع جعلها تتكرر أفقياً و تتمدد حتى تملئ كل خلفية العنصر مهما كان طوله.
مثال
header {
background-image: url('gradient.png');
background-repeat: repeat-x;
background-size: 100% 100%;
}
جرب الكود
تحديد مكان صورة الخلفية
إذا لم تقم بتحديد مكان ظهور صورة الخلفية فإنها إفتراضياً تظهر في الأعلى ناحية اليسار.
لتحديد مكان ظهور صورة الخلفية بالنسبة للعنصر الموضوعة فيه نستخدم الخاصية background-position
و من ثم نمرر لها قيمة واحدة أو قيمتين.
في حال تمرير قيمة واحدة فإنه سيتم إظهارها عمودياً في الوسط. و في حال تمرير قيمتين لها فالأولى تمثل مكانها أفقياً و الثانية عمودياً.
فيما يلي القيم التي يمكنك تمريرها لتحديد مكان ظهور الخلفية:
left top
لإظهار الصورة ناحية اليسار و في الأعلى.
left center
لإظهار الصورة ناحية اليسار و في الوسط عمودياً.
left bottom
لإظهار الصورة ناحية اليسار و في الأسفل.
right top
لإظهار الصورة ناحية اليمين و في الأعلى.
right center
لإظهار الصورة ناحية اليمين و في الوسط عمودياً.
right bottom
لإظهار الصورة ناحية اليمين و في الأسفل.
center top
لإظهار الصورة في الوسط أفقياً و في الأعلى.
center center
لإظهار الصورة في الوسط أفقياً و عمودياً.
center bottom
لإظهار الصورة في الوسط أفقياً و في الأسفل.
x% y%
هنا نقصد تمرير رقم مئوي مكان x
يمثل كم نريد أن تكون الصورة بعيدة جهة يسار العنصر و تمرير رقم مئوي مكان y
يمثل كم نريد أن تكون الصورة بعيدة جهة أعلى العنصر.
x-unit y-unit
هنا نقصد تمرير رقم بوحدة قياس محددة مثل px ييمثل كم نريد أن تكون الصورة بعيدة جهة يسار العنصر و تمرير رقم بوحدة قياس محددة مكان y
يمثل كم نريد أن تكون الصورة بعيدة جهة أعلى العنصر.
في المثال التالي وضعنا الصورة pyramids.png
كخلفية للعنصر الذي يملك كلاس egypt
مع جعلها لا تتكرر و تظهر فيه في الأعلى ناحية اليمين.
مثال
.egypt {
background-image: url('pyramids.png');
background-repeat: no-repeat;
background-position: right top;
}
جرب الكود
تثبيت صورة الخلفية أثناء النزول في الصفحة
لتحديد ما إن كانت الصورة الموضوعة كخلفية ستظل ثابتة (ظاهرة) خلف العنصر في حال النزول في الصفحة أم أنها ستبقى مكانها نستخدم الخاصية background-attachment
و من ثم نمرر لها إحدى القيم التالية:
scroll
لجعل الصورة تبقى مكانها في حال النزول في الصفحة و هذه قيمتها الإفتراضية.
fixed
لجعل الصورة تظل ظاهرة في الصفحة عند النزول فيها إذا كان محتواها أكبر منها.
local
لجعل الصورة تظل ظاهرة عند النزول بداخل العنصر إذا كان محتواه أكبر منه.
ملاحظة
fixed
يفترض أن تستخدمها مع الوسم <body>
فقط لأنها تستخدم لتثبيت الخلفية بالنسبة للصفحة بأكملها.
local
يفترض أن تستخدمها مع أي وسم موضوع بداخل الوسم <body>
لأنها تستخدم لتثبيت الخلفية بالنسبة لعنصر محدد في الصفحة.
في المثال التالي قمنا بتلوين خلفية الصفحة و كذلك وضعنا الصورة moon.png
كخلفية ثابتة فيها مع جعلها لا تتكرر و تظهر في الأعلى ناحية اليمين.
إذاً عند النزول في الصفحة ستلاحظ أنها ستظل ظاهرة.
مثال
body {
background-image: url('moon.png');
background-color: cornflowerblue;
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
جرب الكود
تعريف كل خصائص الخلفية بسطر واحد
يمكنك تعريف كل خصائص الخلفية بشكل مختصر ( Shorthand Property ) حتى لا تضطر إلى كتابة الكثير من كود CSS.
عند اتباع هذا الأسلوب أكتب background
و من ثم قم بتمرير خصائص القيم التالية لها بالترتيب و يمكنك عدم تمريرها جميعها:
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position];
مثال
body {
background: cornflowerblue url('moon.png') no-repeat fixed right top;
}
جرب الكود