ماهي الخلفيات في لغة CSS؟

السلام عليكم في هذا الدرس ستنعرف على الخلفيات في لغة CSS. سنتعرف على التعريف الخاص بها وفي ماذا تستخدم وأمثلة عن بعض الخصائص.

يتم استخدام خاصية background في لغة CSS لتعيين الخلفية لعنصر HTML. تسمح هذه الخاصية للمطورين بتخصيص العديد من الخصائص المختلفة للخلفية ، مما يجعلها تبدو أكثر جمالا وتعطي المستخدم تجربة مرئية مميزة. فيما يلي شرح لجميع الخصائص المتاحة في الخاصية background في لغة CSS.

1) خاصية background-color: تستخدم هذه الخاصية لتعيين لون خلفية لعنصر HTML. يمكن تعيين لون خلفية معين باستخدام القيم الرقمية ، مثل #f00f00 أو rgb(255، 255، 255).
كما ترون سيثم تغيير لن الخلفية الخاصة بالصفحة من الأبيض إلى الأحمر لأننا هنا قمنا بتحديد وسم ال body مثال:

CSS

body {
    background-color: #f00f00;
}

2) خاصية background-image: يمكن استخدام هذه الخاصية لتعيين صورة كخلفية لعنصر HTML. يمكن تعيين الصورة باستخدام عنوان URL لملف الصورة. مثال:

CSS

div {
    background-image: url("img-name.jpg");
}

3) خاصية background-repeat: يستخدم هذه الخاصية لتحديد ما إذا كانت الصورة المعينة في background-repeat ستتكرر على طول الخلفية أم لا. القيم الشائعة هي repeat و no-repeat. مثال:

CSS

div {
    background-image: url("img-name.jpg");
    background-repeat: no-repeat;
}

4) خاصية background-position: يستخدم هذه الخاصية لتحديد مكان وضع الصورة في الخلفية. يمكن تعيين القيم الأفقية والعمودية باستخدام الكلمات الرئيسية left و right و center و top و bottom ، أو بالقيم الرقمية. مثال:

CSS

div {
    background-image: url("img-name.jpg");
    background-position: center;
}

5) خاصية background-size: تستخدم هذه الخاصية لتحديد حجم الصورة المحددة في background-size. يمكن تعيين القيم باستخدام الكلمات الرئيسية cover أو contain ، أو بالقيم الرقمية. مثال:

CSS

div {
    background-image: url("img-name.jpg");
    background-size: cover;
}

خاصية background-attachment: تستخدم هذه الخاصية لتحديد ما إذا كانت الخلفية ستتحرك مع تمرير الصفحة أو تظل ثابتة. القيم الشائعة هي scroll و fixed. مثال:

CSS

div {
    background-image: url("img-name.jpg");
    background-attachment: fixed;
}

7) خاصية background-origin: تستخدم هذه الخاصية لتحديد منطقة العنصر التي سيتم عرض الخلفية بها. القيم الشائعة هي padding-box و border-box و content-box. مثال:

CSS

div {
    background-image: url("img-name.jpg");
    background-origin: content-box;
}

8- خاصية background-clip: تستخدم هذه الخاصية لتحديد المنطقة التي سيتم قص الخلفية بها. القيم الشائعة هي padding-box و border-box و content-box. مثال:

CSS

div {
    background-image: url("img-name.jpg");
    background-clip: padding-box;
}

كل الخواص التي ثم ذكرها سابقا يوجد لها إختصار في خاصية واحدة بدل كتابة كل تلك الخواص في خمس أسطر مثلا نكتبها في سطر واحد إسم الخاصية background. مثال:

CSS

div {
    background: url("img-name.jpg") no-repeat center cover fixed;
}

باستخدام هذه الخصائص، يمكن للمطورين تخصيص خلفية العنصر HTML بشكل مفصل وتحسين جاذبيتها وجعلها أكثر جاذبية للمستخدم.

وهكذا إنتهينا من درسنا أو مقالتنا المتواضعة أتمنى أنك فهمت و وفقك الله أتمنى دعمنا بمشاركة الدرس لكي تعم الفائدة.