شرح تكرار وتموضع الخلفية في CSS — كيف تضبط الصورة بدقة؟

بعد تعلم background-image، الخطوة التالية هي التحكم بطريقة ظهور الصورة: هل تتكرر؟ أين تتموضع؟ هل تبقى ثابتة أثناء التمرير؟

هذا الدرس موجه لمن يبحث عن شرح background-repeat في CSS أو كيف أحدد مكان صورة الخلفية في CSS أو الفرق بين repeat و no-repeat.

ما هي background-repeat في CSS؟

خاصية background-repeat تتحكم في تكرار صورة الخلفية داخل العنصر. الوضع الافتراضي في CSS هو repeat.

القيمة	النتيجة
repeat	تكرار أفقي وعمودي
repeat-x	تكرار أفقي فقط
repeat-y	تكرار عمودي فقط
no-repeat	بدون تكرار

مثال عملي على background-repeat في CSS

.box {
    background-image: url("dot.png");
    background-repeat: no-repeat;
}

ماذا يفعل هذا الكود؟ يضع صورة الخلفية مرة واحدة فقط.

سطر بسطر:

• background-image: يحدد الصورة.
• no-repeat: يمنع التكرار.

النتيجة المتوقعة: صورة واحدة داخل العنصر.

خطأ شائع: نسيان no-repeat فتظهر الصورة مكررة بشكل غير مرغوب.

ما هي background-position في CSS؟

خاصية background-position تحدد مكان صورة الخلفية داخل العنصر. يمكن استخدام كلمات أو قيم رقمية.

.hero {
    background-position: center center;
}

.card {
    background-position: right top;
}

ماذا يفعل هذا الكود؟ يضع الصورة في وسط .hero وفي أعلى اليمين داخل .card.

النتيجة المتوقعة: تحكم دقيق بمكان أهم جزء من الصورة.

خطأ شائع: تجاهل background-position مع cover فيُقص الجزء الخاطئ من الصورة.

background-attachment في CSS

تحدد هل الخلفية تتحرك مع الصفحة أم تبقى ثابتة.

• scroll (افتراضي): الخلفية تتحرك مع المحتوى.
• fixed: الخلفية ثابتة أثناء التمرير (تأثير Parallax بسيط).

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

ماذا يفعل هذا الكود؟ يثبت الخلفية بينما يتحرك المحتوى فوقها.

خطأ شائع: الاعتماد الكامل على fixed في الهواتف حيث قد يختلف الدعم حسب المتصفح.

تركيبة احترافية شائعة لخلفية CSS

.section {
    background-image: url("hero.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

النتيجة المتوقعة: خلفية متوازنة، غير مكررة، وتغطي العنصر بشكل جميل.

أخطاء شائعة في background-repeat و background-position

١) التكرار الافتراضي غير المقصود: نسيان no-repeat.

٢) اختيار position غير مناسب: قص جزء مهم من الصورة.

٣) خلط القيم: مثل كتابة قيم position غير صحيحة أو ترتيب خاطئ.

الأسئلة الشائعة — FAQ (أسئلة بحثية شائعة)

كيف أمنع تكرار صورة الخلفية في CSS؟

استخدم background-repeat: no-repeat;.

كيف أحدد مكان صورة الخلفية في CSS؟

استخدم background-position مثل center أو right top أو قيم رقمية.

ما الفرق بين repeat-x و repeat-y في CSS؟

repeat-x يكرر أفقياً فقط، بينما repeat-y يكرر عمودياً فقط.

هل background-attachment: fixed جيد دائماً؟

يعطي تأثيراً بصرياً جميلاً، لكن اختبره على الهاتف لأن الأداء/الدعم قد يختلف.

لماذا صورة الخلفية تتكرر رغم أني لا أريد؟

لأن القيمة الافتراضية هي repeat إذا لم تحدد غير ذلك.