CSS – الخلفيات Backgrounds

يوجد مجموعة من الخصائص التي تتحكم في الخلفيات backgrounds للعناصر مثل:

• background-color: تحدد لون خلفية العنصر.
• background-image: تحدد صورة الخلفية للعنصر.
• background-repeat: تحدد هيئة تكرار الصورة في خلفية العنصر.
• background-attachment: تحدد هيئة التمرير scroll للصورة في خلفية العنصر.
• background-position: تحدد موضع الصورة في خلفية العنصر.
• background: هي خاصية تجمع كل الخصائص السابقة في خاصية واحدة.

تحديد لون خلفية العنصر background-color

تستخدم الخاصية background-color لتحديد لون الخلفية للعنصر

body{
	background-color: #F5F5F5;
}

#mainHeader{
	background-color: #C80000;
}

تحديد صورة خلفية العنصر background-image

تستخدم الخاصية background-image لتحديد صورة الخلفية للعنصر

body{
	background-image: url("images/bg.jpg");
	background-color: #F5F5F5;
}

قد تكون الصورة موجودة في مجلد فنكتب عنوان نسبي Relative كما بالمثال السابق. او قد تكون صورة موجودة اونلاين فنكتب عنوانها، مثلا https://url-to-image/image-name.jpg.

تحديد تكرار صورة خلفية العنصر background-repeat

تستخدم الخاصية background-repeat لتحديد طريقة تكرار صورة الخلفية للعنصر.

body{
	background-image: url("/images/bg.jpg");
	background-repeat: repeat-x;
	background-color: #F5F5F5;
}

قد يكون حجم الصورة التي نريد وضعها في الخلفية مختلف عن حجم الشاشة (سواء الطول او العرض) لذا سنحتاج ان نحدد طريقة التكرار للصورة. اهم خيارات التكرار:

• repeat: يكون التكرار للصورة في الاتجاة الافقي والرأسي.
• repeat-x: يكون التكرار في الاتجاه الافقي فقط.
• repeat-y: يكون التكرار في الاتجاه الرأسي فقط.
• no-repeat: لا يكون هناك تكرار للصورة.
• space: سيحاول المتصفح تكرار الصورة بحيث انه لا يحدث تقطيع في الصور المتكررة (قد يضع مسافات بين الصور حتى لا يحدث ذلك التقطيع)

تحديد هيئة تمرير scroll صورة خلفية العنصر background-attachment

تستخدم الخاصية background-attachment لتحديد هيئة تمريرscroll صورة الخلفية للعنصر.

body{
	background-image: url("/images/bg.jpg");
	background-position: scroll;
	
}

هناك عدد خيارات لتلك الخاصية:

• scroll: تتحرك الصورة مع scroll.
• fixed: تكون الصورة ثابتة.
• local: تتحرك الصورة مع محتوى العنصر التي فيه.

تحديد صورة خلفية العنصر background-position

تستخدم الخاصية background-position لتحديد موضع صورة الخلفية للعنصر

body{
	background-image: url("/images/bg.jpg");
	background-position: center;
	
}

.comtainerA{
	background-image: url("/images/c-bg.jpg");
	background-position: left center;
	
}

.comtainerB{
	background-image: url("/images/c-bg.jpg");
	background-position: 50px 100px;
	
}

قد يكون حجم الصورة التي نريد وضعها في الخلفية مختلف عن حجم الشاشة (سواء الطول او العرض) لذا سنحتاج ان نحدد موضع الصورة. هناك عدة خيارات للموضع منها ان نحدد نقطة البداية (x,y) ومنها قيم مثل center وغيرها (x تمثل النحور الافقي و y تمثل المحور الرأسي)

• x y: هي طريقة نحدد بداية اظهار الصورة. ويكون نقطة صفر احداثيات الصور هي اعلى يسار الشاشة. وقيم x و y هي البعد عن نقطة صفر الاحداثيات.
• x %y%: مثل x , y لكن تكون الابعاد نسبية الى حجم العنصر الذي فيه الصورة.
• positionX positionY: وفيها نحدد بداية الموضع باستخدام مجموعة من القيم
  1. قيم positionX هي left و center و right.
  2. قيم positionY هي top و center و bottom.

في المثال السابق عندما حددنا center في عنصر body. هي صورة مختصرة عندما يكون positionX positionY نفس القيم، في المثال السابق تكون قيمتها تكافئ center center

تحدد خواص الصورة في خاصية واحدة background

تستخدم الخاصية background لوضع كل الخواص السابقة في خاصية واحدة

body{
	background: #F5F5F5 url("/images/bg.jpg") no-repeat fixed center;	
}