🌅 إضافة صور الخلفية في CSS: دليل شامل للمبتدئين

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

🎯 ما هي خاصية Background Image؟

خاصية background-image في CSS تسمح لك بوضع صورة كخلفية لأي عنصر في صفحة الويب. بدلاً من الاكتفاء بالألوان المسطحة، يمكنك استخدام صور جميلة تجعل تصميمك أكثر احترافية.

البناء الأساسي:

selector {
    background-image: url("مسار_الصورة");
}

📁 كيفية تحديد مسار الصورة

المسار (Path) هو العنوان الذي يخبر المتصفح أين يجد الصورة. هناك طريقتان رئيسيتان:

  1. الصور المخزنة محلياً (في مجلد مشروعك):
.box {
    background-image: url("images/background.jpg");
}
  1. الصور من الإنترنت (رابط مباشر):
.box {
    background-image: url("https://example.com/image.jpg");
}

🖼️ مثال عملي بسيط

لنطبق ما تعلمناه على صفحة ويب حقيقية:

<!DOCTYPE html>
<html>
<head>
    <style>
        .hero-section {
            width: 100%;
            height: 400px;
            background-image: url("hero-bg.jpg");
        }
    </style>
</head>
<body>
    <div class="hero-section">
        <h1>مرحباً بكم في موقعنا</h1>
    </div>
</body>
</html>

في هذا المثال، قمنا بإضافة صورة hero-bg.jpg كخلفية للقسم الرئيسي في الصفحة.

🔄 التحكم في تكرار الصورة (Background Repeat)

بشكل افتراضي، إذا كانت الصورة أصغر من العنصر، سيقوم المتصفح بتكرارها لملء المساحة. لكن يمكننا التحكم في هذا السلوك:

.container {
    background-image: url("pattern.png");
    background-repeat: no-repeat; /* لا تكرار */
}

.container-2 {
    background-image: url("pattern.png");
    background-repeat: repeat-x; /* تكرار أفقي فقط */
}

.container-3 {
    background-image: url("pattern.png");
    background-repeat: repeat-y; /* تكرار عمودي فقط */
}

📏 التحكم في حجم الصورة (Background Size)

خاصية background-size تتحكم في كيفية عرض الصورة داخل العنصر:

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

.contain-example {
    background-image: url("icon.png");
    background-size: contain; /* عرض الصورة كاملة دون قص */
}

.custom-size {
    background-image: url("logo.png");
    background-size: 200px 150px; /* عرض محدد بالبكسل */
}

🎯 تحديد موقع الصورة (Background Position)

تحدد مكان ظهور الصورة داخل العنصر:

.center-image {
    background-image: url("star.png");
    background-position: center; /* في المنتصف */
}

.top-right {
    background-image: url("badge.png");
    background-position: top right; /* أعلى اليمين */
}

.custom-position {
    background-image: url("pin.png");
    background-position: 20px 50px; /* إزاحة أفقية وعمودية */
}

💡 مثال شامل يجمع كل الخصائص

لنرى كيف ندمج كل هذه الخصائص في مثال واحد عملي:

.main-header {
    background-image: url("header-bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 300px;
    color: white;
    text-align: center;
    padding-top: 100px;
}

هذا الكود ينشئ رأس صفحة جميلاً بصورة خلفية تغطي المساحة كاملة دون تكرار، ومحاذاة للوسط.

🚀 نصائح مهمة للمبتدئين

  1. اختر صوراً عالية الجودة ولكن بحجم مناسب لتحميل سريع
  2. استخدم الألوان المناسبة للنص فوق الصورة لضمان قابلية القراءة
  3. جرب خاصية background-attachment: fixed لإنشاء تأثير Parallax الجميل
  4. احرص على أن تكون الصور responsive وتتأقلم مع مختلف أحجام الشاشات

🎓 خلاصة الدرس

تعلمنا في هذا الدرس كيفية:

  • إضافة صور خلفية باستخدام background-image
  • التحكم في تكرار الصورة بـ background-repeat
  • ضبط حجم الصورة بـ background-size
  • تحديد موقع الصورة بـ background-position

هذه الأساسيات ستساعدك في إنشاء تصميمات ويب احترافية وجذابة.