CSS - Backgrounds الخلفيات

CSS - الخلفيات (Backgrounds)

🔸 توفر CSS العديد من الخصائص للتحكم في خلفيات العناصر، سواء كانت ألوانًا أو صورًا أو كليهما.

✅ الخصائص الأساسية للخلفيات

• background-color: لتحديد لون خلفية العنصر.
• background-image: لتحديد صورة كخلفية.
• background-repeat: لتحديد إذا كانت الصورة تتكرر أو لا.
• background-attachment: لتحديد ما إذا كانت الخلفية ثابتة أو تتحرك مع التمرير.
• background-position: لتحديد موضع الصورة في الخلفية.
• background-size: لتحديد حجم الخلفية.
• background: خاصية مختصرة تجمع كل ما سبق.

🧪 مثال عملي شامل على جميع الخصائص

body {
  background-color: #f0f0f0;
  background-image: url("example.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

🧪 مثال باستخدام الخاصية المختصرة background

body {
  background: #f0f0f0 url("example.jpg") no-repeat center top / cover fixed;
}

📘 شرح تفصيلي لكل خاصية

• background-color: تستخدم لتلوين خلفية العنصر. مثال: background-color: lightblue;
• background-image: لإدراج صورة خلفية. مثال: background-image: url("bg.jpg");
• background-repeat:
  • repeat: تكرار الصورة أفقيًا وعموديًا (افتراضي).
  • no-repeat: عدم تكرار الصورة.
  • repeat-x: تكرار أفقي فقط.
  • repeat-y: تكرار عمودي فقط.
• background-attachment:
  • scroll: تتحرك الخلفية مع التمرير (افتراضي).
  • fixed: تظل الخلفية ثابتة أثناء التمرير.
• background-position: تتحكم في مكان ظهور الصورة، مثل top left أو center center.
• background-size:
  • auto: الحجم الطبيعي للصورة.
  • cover: تغطي الصورة كامل العنصر بدون تشويه.
  • contain: يتم تصغير الصورة لتناسب العنصر بدون قص أو تشويه.
• background: خاصية مختصرة تتيح كتابة كل الخصائص السابقة في سطر واحد.

💡 ملاحظات مهمة

• استخدم background-size: cover; مع background-attachment: fixed; للحصول على تأثير أنيق في الخلفيات.
• تأكد من ضغط صور الخلفية لتحسين الأداء.
• يفضل استخدام اختصار background لتقليل حجم الكود وتحسين تنظيمه.