CSS

Part 8 الخلفيات في CSS – سلسلة FSWD -CSS

ahmedمنذ 4 أسابيع

0 154 3 دقائق

الخلفيات في CSS

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

في هذا الشرح، سنتناول كيفية إضافة وتخصيص الخلفيات باستخدام CSS.

1. إضافة الخلفيات

1.1 استخدام `background-color`

background-color يستخدم لتعيين لون خلفية للعنصر.
يمكن أن يكون اللون أي قيمة CSS معتمدة، مثل الألوان العادية (red, blue) أو قيم hex و rgb.

مثال:

body {
    background-color: #3498db;  /* خلفية بلون أزرق */
}

1.2 استخدام `background-image`

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

مثال

body {
    background-image: url('background.jpg');  /* إضافة صورة كخلفية */
}

1.3 استخدام `background-position`

background-position يستخدم لتحديد مكان الصورة في الخلفية.
يمكنك تحديد الموقع باستخدام القيم مثل top, bottom, left, right, أو تحديد القيم بنسبة مئوية أو بكسل.

مثال

body {
    background-image: url('background.jpg');
    background-position: center center;  /* الصورة في المنتصف */
}

هنا، يتم ضبط الصورة بحيث تظهر في منتصف العنصر (من المنتصف عموديًا وأفقيًا).

1.4 استخدام `background-repeat`

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

مثال

body {
    background-image: url('background.jpg');
    background-repeat: no-repeat;  /* لا يتم تكرار الصورة */
}

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

2. تخصيص الخلفيات

2.1 استخدام `background-size`

background-size يسمح لك بتغيير حجم الصورة في الخلفية.
- القيم الممكنة هي: auto (الحجم الافتراضي للصورة)، cover (لتغطية العنصر بالكامل)، و contain (لإظهار الصورة بالكامل داخل العنصر).

مثال:

body {
    background-image: url('background.jpg');
    background-size: cover;  /* تغطية العنصر بالكامل بالصورة */
}

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

2.2 استخدام `background-attachment`

background-attachment يتحكم في سلوك الصورة عند التمرير.
- القيم الممكنة هي: scroll (يتحرك مع التمرير)، و fixed (يبقى ثابتًا عند التمرير).

مثال

body {
    background-image: url('background.jpg');
    background-attachment: fixed;  /* الصورة تظل ثابتة عند التمرير */
}

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

كود مثال كامل:

HTML

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>مثال على الخلفيات في CSS</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <h1>مرحبًا بك في موقعنا</h1>
    <p>هذا هو مثال على كيفية استخدام الخلفيات في CSS.</p>

</body>
</html>

CSS (styles.css)

/* تحديد اللون الخلفي */
body {
    background-color: #3498db;  /* خلفية بلون أزرق */
    color: white;
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 50px;
}

/* إضافة صورة كخلفية */
body {
    background-image: url('background.jpg');
    background-position: center center;  /* الصورة في المنتصف */
    background-repeat: no-repeat;  /* لا يتم تكرار الصورة */
    background-size: cover;  /* تغطية العنصر بالكامل بالصورة */
    background-attachment: fixed;  /* الصورة تظل ثابتة عند التمرير */
}

/* تنسيق النصوص */
h1 {
    font-size: 3em;
    margin: 20px 0;
}

p {
    font-size: 1.5em;
}

الشرح التفصيلي:

تحديد اللون الخلفي باستخدام background-color:
- نبدأ بتحديد لون الخلفية باستخدام background-color: #3498db (اللون الأزرق). هذا اللون سيظهر خلف جميع العناصر داخل الصفحة.
إضافة صورة كخلفية باستخدام background-image:
- قمنا بإضافة صورة خلفية باستخدام background-image: url('background.jpg'). هذه الصورة ستكون في خلفية الجسم بالكامل.
تحديد موقع الصورة باستخدام background-position:
- تم تحديد موقع الصورة بحيث تكون في المنتصف باستخدام background-position: center center.
منع تكرار الصورة باستخدام background-repeat:
- background-repeat: no-repeat يعني أن الصورة لن تتكرر في الخلفية، بل ستظهر مرة واحدة فقط.
تغيير حجم الصورة باستخدام background-size:
- background-size: cover يعني أن الصورة ستغطي العنصر بالكامل بغض النظر عن أبعادها. قد يتم قص بعض الأجزاء من الصورة لكي تناسب العنصر.
تثبيت الصورة عند التمرير باستخدام background-attachment:
- background-attachment: fixed يجعل الصورة ثابتة في الخلفية عند التمرير، بينما يمر باقي المحتوى فوقها.

نصائح هامة عند التعامل مع الخلفيات:

استخدام صور مهيئة للويب:
- تأكد من أن الصور التي تستخدمها كخلفية مهيئة للويب (مضغوطة بأعلى جودة ممكنة بدون التأثير على الحجم). هذا سيساعد في تقليل أوقات تحميل الصفحة.
الانتقالات على الخلفيات:
- يمكنك إضافة تأثيرات انتقالية على الخلفيات باستخدام CSS transitions لخلق تأثيرات ديناميكية.
التعامل مع الصور كبيرة الحجم:
- استخدم background-size: contain إذا كنت تريد أن تظهر الصورة كاملة داخل العنصر.

التجربة:

جرب تغيير القيم الخاصة بـ background-position و background-size و background-attachment لترى كيف تؤثر هذه التغييرات على عرض الصورة في الخلفية.
يمكنك أيضًا تجربة استبدال الصورة background.jpg بصور مختلفة لرؤية كيفية تأثيرها على التصميم