كيفية التحكم في حجم وموضع وتكرار الخلفية باستخدام CSS

خصائص ألوان الخلفية

• استخدام ألوان الخلفية العادية لتنسيق العناصر.


• اختيار ألوان الخلفية باستخدام كود Hex.


• استخدام ألوان الخلفية بتنسيق RGB.

ما هو حجم الخلفية؟

• القيم المطلقة مثل px لتحديد العرض والارتفاع.


• النسب المئوية % لجعل الخلفية تتناسب مع حجم العنصر.

تعيين حجم الخلفية

• عرض وارتفاع معينين للخلفية.


• ملء المساحة باستخدام القيمة contain.


• ملء المساحة بالكامل باستخدام القيمة cover.

خاصية تكرار الخلفية

• repeat: لجعل الخلفية تتكرر تلقائيًا.


• no-repeat: لإيقاف التكرار.

موضع الخلفية

• توسيط الخلفية عموديًا باستخدام center.


• توسيط الخلفية أفقيًا باستخدام center.


• توسيطها أفقيًا وعموديًا معًا.

تطبيق عملي

      section {

        background-image: url('background.jpg');

        background-size: cover;

        background-position: center;

        background-repeat: no-repeat;

        height: 100vh;

        display: flex;

        justify-content: center;

        align-items: center;

      }

    

ابدأ الآن!