الخلفيات (Backgrounds) فى CSS

سجين القدر

اخر تحديث :

الخلفيات (Backgrounds) فى CSS #

سنتناقش فى هذا الفصل جميع أنواع الخلفيات (Backgrounds) فى CSS بالتفصيل، مع بعض الأمثلة التوضيحية.

الخلفيات فى CSS

1. CSS background-color

تستخدم خاصية الـ background-color لتحديد لون خلفية العنصر. كالتالى:

<style>
    .demo {
	background-color: green;
	color: white;
    }
	</style>
	<h2 class="demo">CSS Backgrounds</h2>

CSS Backgrounds

يمكنك تحديد قيمة اللون بأكثر من طريقة:

إسم اللون مباشرًا، مثل: “black“.
RGB، مثل : “(rgb(0, 0, 0“.
HEX، مثل: “000#“.

مثال للتوضيح:

h2 {
	background-color: black; /* Outputs = black */
	}

	h2 {
	background-color: rgb(0, 0, 0); /* Outputs = black */
	}

	h2 {
	background-color: #000; /* Outputs = black */
	}

2. CSS background-image

تستخدم خاصية background-image لتحديد صورة لخلفية العنصر. بشكل افتراضي، يتم تكرار الصورة بحيث تغطي العنصر بالكامل. كالتالى:

div {
	background-image: url("image.jpg");
	height: 250px;
	width: 100%;
	}

3. CSS background-repeat

بشكل افتراضي، يتم تكرار خاصية background-image أفقياً horizontally ورأسياً vertically.

فى بعض الأوقات قد تحتاج إلى تكرار بعض الصور أفقيًا أو رأسيًا، كالتالى:

div {
	background-image: url("image.jpg");
	background-repeat: repeat-x;
	height: 250px;
	width: 100%;
	}

فى حالة عدم إحتياجك إلى تكرار الخلفية نهائيًا، يمكنك إستخدام خاصية (background-repeat: no-repeat)، كالتالى:

div {
	background-image: url("image.jpg");
	background-repeat: no-repeat;
	height: 250px;
	width: 100%;
	}

4. CSS background-position

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

div {
	background-image: url("image.jpg");
	background-repeat: no-repeat;
	background-position: left bottom;
	height: 250px;
	width: 100%;
	}

5. CSS background-attachment

تحدد خاصية background-attachment إذا كان يجب تمرير/ثبات صورة الخلفية. كالتالى:

div {
	background-image: url("image.jpg");
	background-repeat: no-repeat;
	background-attachment: fixed; /* Must be Fixed */
	background-position: top left;
	height: 250px;
	width: 100%;
	}

div {
	background-image: url("image.jpg");
	background-attachment: scroll; /* Must be scroll */
	height: 250px;
	width: 100%;
	}

6. CSS background

الخاصية background عبارة عن اختصار يقوم بتعيين الخصائص التالية في إعلان CSS واحد أو كـ دفعة واحده. بدلًا من القيام بذلك:

div {
	background-image: url("image.jpg");
	background-repeat: no-repeat;
	background-position: left bottom;
	background-color: #f00;
	}

يمكنك تنفيذ كل التنسيقات السابقة فى سطر واحد، كالتالى:

div {
	background: #f00 url("image.jpg") no-repeat left bottom;
	}

عند استخدام خاصية الـ background المختصرة، لازم يكون ترتيب قيم الخاصية كما يلي:

background-color
background-image
background-repeat
background-attachment
background-position.

تعديل المقال

الأقسام CSS Tutorial

تعلم البرمجة ببساطة