خصائص الخلفية في CSS: دليلك الشامل

مقدمة

تعد الخلفيات جزءًا مهمًا من تصميم أي صفحة ويب، حيث تلعب دورًا رئيسيًا في تحديد الشعور العام والمظهر الجمالي للصفحة. لهذا السبب، يقدم CSS مجموعة من الخصائص التي تسمح للمصممين بالتحكم الكامل في الخلفيات، بدءًا من اللون والصورة وصولاً إلى كيفية التكرار والموضع والحجم.

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

خاصية background-color في CSS

تتيح لك خاصية background-color تحديد لون خلفية لأي عنصر في صفحتك. يمكنك استخدام ألوان مسماة، أو ألوان RGB، أو ألوان HEX، أو ألوان HSL.

مثال على استخدام خاصية background-color:

body {
    background-color: #f3f3f3;
}

خاصية background-color تقبل القيم بعدة صيغ:

الألوان المسماة، مثل “blue” أو “green”. توجد العديد من الألوان المسماة التي يمكنك استخدامها في CSS.

الألوان السداسية العشرية (HEX)، والتي تتكون من 6 أرقام و/أو أحرف تسبقها علامة #. مثل #FF0000 للأحمر.

الألوان الـRGB، والتي تمثل نسب الأحمر والأخضر والأزرق في اللون. مثل rgb(255, 0, 0) للأحمر.

الألوان الـHSL، والتي تمثل الصبغة، والتشبع، والإضاءة. مثل hsl(0, 100%, 50%) للأحمر.

خاصية background-image في CSS

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

مثال على استخدام خاصية background-image:

body {
    background-image: url('background.jpg');
}

خاصية background-attachment في CSS

خاصية background-attachment تحدد ما إذا كانت الخلفية ستكون ثابتة أو تتحرك مع بقية المحتوى عند التمرير. القيم الممكنة هي scroll (الافتراضية)، وfixed، وlocal.

مثال على استخدام خاصية background-attachment:

body {
    background-image: url('background.jpg');
    background-attachment: fixed;
}

خاصية background-clip في CSS

تحدد خاصية background-clip كيف يجب قص الخلفية. القيم الممكنة هي border-box (الافتراضية)، وpadding-box، وcontent-box.

مثال على استخدام خاصية background-clip:

div {
    background-color: #ff0000;
    background-clip: content-box;
}

خاصية background-origin في CSS

تحدد خاصية background-origin الموقع الذي يجب أن تبدأ منه الخلفية. القيم الممكنة هي padding-box (الافتراضية)، وborder-box، وcontent-box.

مثال على استخدام خاصية background-origin:

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

خاصية background-position في CSS

خاصية background-position تحدد الموضع الأولي للخلفية. يمكن تحديده باستخدام النسب المئوية، أو القيم الطولية، أو الكلمات المفتاحية مثل “top”, “center”, “bottom”, “left”, و “right”.

مثال على استخدام خاصية background-position:

body {
    background-image: url('background.jpg');
    background-position: center center;
}

خاصية background-repeat في CSS

خاصية background-repeat تحدد كيف يجب تكرار الصورة الخلفية. القيم الممكنة هي repeat (الافتراضية)، وrepeat-x، وrepeat-y، وno-repeat.

مثال على استخدام خاصية background-repeat:

body {
    background-image: url('background.jpg');
    background-repeat: no-repeat;
}

في هذا المثال، لن يتم تكرار الصورة الخلفية، وستظهر مرة واحدة فقط.

خاصية background-size في CSS

خاصية background-size تحدد حجم الخلفية. يمكن تحديدها بنسبة مئوية، أو قيم طولية، أو كلمات مفتاحية مثل “auto”, “cover”, و “contain”.

مثال على استخدام خاصية background-size:

body {
    background-image: url('background.jpg');
    background-size: cover;
}

خاصية background في CSS (الخاصية المختصرة)

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

مثال على استخدام خاصية background:

body {
    background: #f3f3f3 url('background.jpg') no-repeat fixed center;
}

خاصية background-image في CSS

كما ناقشنا سابقاً، خاصية background-image تتيح لك تعيين صورة كخلفية للعنصر. يمكنك تحديد مسار الصورة المطلوبة. بالإضافة إلى ذلك، يمكنك تحديد عدة صور كخلفية، وسيتم ترتيبها حسب الترتيب.

مثال على استخدام خاصية background-image مع عدة صور:

body {
    background-image: url('foreground.png'), url('background.jpg');
}

خاصية background-repeat في CSS

كما ناقشنا سابقاً، خاصية background-repeat تحدد كيف يجب تكرار الصورة الخلفية. يمكنك تعيينها إلى repeat-x (تكرار أفقي)، repeat-y (تكرار عمودي)، repeat (تكرار في كل الاتجاهات)، أو no-repeat (لا تكرار).

مثال على استخدام خاصية background-repeat مع تكرار أفقي:

body {
    background-image: url('stripe.png');
    background-repeat: repeat-x;
}

خاصية background-position في CSS

كما ناقشنا سابقاً، خاصية background-position تحدد الموضع الأولي للخلفية. يمكن تحديده باستخدام النسب المئوية، أو القيم الطولية، أو الكلمات المفتاحية مثل “top”, “center”, “bottom”, “left”, و “right”.

مثال على استخدام خاصية background-position:

body {
    background-image: url('background.jpg');
    background-position: 50% 50%;
}

في هذا المثال، سيتم تحديد موضع الخلفية في وسط العنصر بالضبط.

الأسئلة المتكررة (FAQ)