Skip to main content

مقدمة

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

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

خاصية background-color في CSS

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

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

CSS
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:

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

خاصية background-attachment في CSS

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

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

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

خاصية background-clip في CSS

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

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

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

خاصية background-origin في CSS

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

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

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

خاصية background-position في CSS

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

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

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

خاصية background-repeat في CSS

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

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

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

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

خاصية background-size في CSS

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

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

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

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

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

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

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

خاصية background-image في CSS

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

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

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

خاصية background-repeat في CSS

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

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

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

خاصية background-position في CSS

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

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

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

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

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

ما هو الفرق بين خاصية background وخاصيات الخلفية الأخرى في CSS؟

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

ما هو الفرق بين خاصيتي background-clip و background-origin في CSS؟

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

عمليات النمذجة في التصميم ثلاثي الأبعاد

عمليات النمذجة في التصميم ثلاثي الأبعاد

تعلم كيفية استخدام العمليات الأساسية للنمذجة في 3D بما في ذلك البثق، مسار السحب، الثورة،…
ملفات التسليم في تصميم واجهة المستخدم

ملفات التسليم في تصميم واجهة المستخدم

هل ترغب في معرفة ما يتعين على مصممي واجهة المستخدم تقديمه بالضبط؟ تعرف على مجموعة…
أقسام المساعدة والتعليقات: الأساسيات وأفضل الممارسات

تصميم أقسام المساعدة والتعليقات: الأساسيات وأفضل الممارسات

تعلم كيفية تصميم أقسام المساعدة والتعليقات بطريقة تخدم الغرض المرجو منها دون أن تسبب الإرباك…