الخلفيات: اللون والصورة والحجم والموضع

مقدمة في خلفيات CSS

تُعد خلفيات CSS من أقوى الأدوات المرئية المتاحة لمطوري الويب. فهي تتيح لك إضافة ألوان وصور وتدرجات لونية وأنماط خلف أي عنصر HTML. تعتبر الخلفيات أساسية لإنشاء تصاميم ويب جذابة بصرياً -- من الأقسام الملونة البسيطة إلى صور البطل المعقدة والأنماط ذات القوام والتأثيرات المرئية متعددة الطبقات. في هذا الدرس، سنستكشف كل خاصية من خصائص الخلفية بالتفصيل، ونفهم كيف تعمل معاً، ونتعلم متى نستخدم صور الخلفية مقابل عناصر <img>.

لكل عنصر HTML طبقة خلفية تقع خلف محتواه وحشوته و(بشكل افتراضي) تمتد إلى حافة إطاره. فهم كيفية تفاعل الخلفيات مع نموذج الصندوق أمر بالغ الأهمية للتحكم في مظهرها. بشكل افتراضي، تكون خلفية العنصر transparent (شفافة)، مما يعني أنك تستطيع الرؤية من خلالها إلى ما وراءها -- سواء كانت خلفية العنصر الأب أو خلفية body أو اللوحة البيضاء الافتراضية للمتصفح.

خاصية background-color

تحدد خاصية background-color لوناً صلباً خلف محتوى العنصر ومنطقة الحشوة. هذه أبسط خصائص الخلفية وأكثرها استخداماً. تقبل أي قيمة لون CSS صالحة.

/* الألوان المسماة */
.header {
    background-color: navy;
}

/* النظام الست عشري */
.card {
    background-color: #f5f5f5;
}

/* RGB */
.sidebar {
    background-color: rgb(240, 240, 240);
}

/* RGBA (مع الشفافية) */
.overlay {
    background-color: rgba(0, 0, 0, 0.5);
}

/* HSL */
.banner {
    background-color: hsl(210, 100%, 50%);
}

/* HSLA */
.modal-backdrop {
    background-color: hsla(0, 0%, 0%, 0.7);
}

/* شفاف (القيمة الافتراضية) */
.glass-effect {
    background-color: transparent;
}

/* الكلمة المفتاحية currentColor -- تستخدم لون نص العنصر */
.highlight {
    color: #e74c3c;
    background-color: currentColor; /* نفس اللون الأحمر كالنص */
}

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

.hero {
    background-color: #2c3e50; /* احتياطي: أزرق داكن */
    background-image: url('hero-bg.jpg');
}

/* إذا فشل تحميل hero-bg.jpg، يظل اللون الأزرق الداكن
   يوفر التباين للنص الأبيض */
.hero h1 {
    color: white;
}

خاصية background-image

تضع خاصية background-image صورة واحدة أو أكثر خلف العنصر. على عكس عناصر <img> في HTML، فإن صور الخلفية هي تزيينية بحتة -- فهي ليست جزءاً من محتوى المستند، ولا يمكن أن تحتوي على نص بديل، ولا يتم الإعلان عنها بواسطة قارئات الشاشة. هذا يجعلها مثالية للزخرفة المرئية لكنها غير مناسبة لصور المحتوى.

/* رابط URL لملف صورة */
.hero {
    background-image: url('images/hero-bg.jpg');
}

/* رابط URL مطلق */
.banner {
    background-image: url('https://example.com/images/banner.png');
}

/* بدون علامات اقتباس (صالح لكن يُفضل استخدام علامات الاقتباس) */
.section {
    background-image: url(pattern.svg);
}

/* تدرج لوني كصورة خلفية */
.gradient-section {
    background-image: linear-gradient(to right, #667eea, #764ba2);
}

/* إزالة صورة الخلفية */
.plain {
    background-image: none;
}

تقبل دالة url() مسارات نسبية أو مطلقة. يتم حل المسارات النسبية بالنسبة لموقع ملف CSS وليس ملف HTML. هذا تمييز مهم -- إذا كان ملف CSS الخاص بك في /css/styles.css وكتبت url('images/bg.jpg')، فإن المتصفح يبحث عن /css/images/bg.jpg وليس /images/bg.jpg. للإشارة إلى الملفات بالنسبة لجذر الموقع، استخدم url('/images/bg.jpg') مع شرطة مائلة في البداية.

صور خلفية متعددة

يتيح لك CSS وضع طبقات متعددة من صور الخلفية على عنصر واحد. يتم سرد الصور بترتيب مفصول بفواصل، مع الصورة الأولى في الأعلى (الأقرب إلى المشاهد) والصورة الأخيرة في الأسفل. هذه تقنية قوية لإنشاء تأثيرات بصرية معقدة دون عناصر HTML إضافية.

.complex-bg {
    background-image:
        url('overlay-pattern.png'),   /* الطبقة العلوية */
        url('decorative-shape.svg'),  /* الطبقة الوسطى */
        url('main-background.jpg');   /* الطبقة السفلية */
    background-repeat:
        repeat,       /* النمط يتكرر */
        no-repeat,    /* الشكل يظهر مرة واحدة */
        no-repeat;    /* الخلفية الرئيسية تظهر مرة واحدة */
    background-position:
        0 0,              /* النمط يبدأ من أعلى اليسار */
        right bottom,     /* الشكل في أسفل اليمين */
        center center;    /* الخلفية الرئيسية في المنتصف */
    background-size:
        auto,        /* النمط بحجمه الطبيعي */
        200px 200px, /* الشكل بأبعاد ثابتة */
        cover;       /* الخلفية الرئيسية تغطي العنصر */
}

خاصية background-repeat

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

/* الافتراضي: يتكرر في كلا الاتجاهين */
.pattern {
    background-image: url('tile.png');
    background-repeat: repeat;
}

/* التكرار أفقياً فقط */
.horizontal-stripe {
    background-image: url('stripe.png');
    background-repeat: repeat-x;
}

/* التكرار عمودياً فقط */
.vertical-stripe {
    background-image: url('stripe.png');
    background-repeat: repeat-y;
}

/* بدون تكرار -- إظهار الصورة مرة واحدة */
.logo-bg {
    background-image: url('logo.png');
    background-repeat: no-repeat;
}

/* space: تكرار بدون قص، مع إضافة فراغات بين البلاطات */
.spaced-pattern {
    background-image: url('icon.png');
    background-repeat: space;
}

/* round: تكرار بدون قص، مع تغيير حجم البلاطات لتناسب */
.rounded-pattern {
    background-image: url('icon.png');
    background-repeat: round;
}

/* صيغة القيمتين: أفقي عمودي */
.mixed {
    background-image: url('tile.png');
    background-repeat: repeat no-repeat; /* تكرار أفقي فقط */
}

.fancy {
    background-image: url('tile.png');
    background-repeat: space round; /* تباعد أفقياً، تقريب عمودياً */
}

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

خاصية background-position

تتحكم خاصية background-position في مكان وضع صورة الخلفية داخل حاويتها. بشكل افتراضي، يتم وضع صورة الخلفية في الزاوية العلوية اليسرى للعنصر (0% 0%). هذه الخاصية مهمة بشكل خاص عند استخدام background-repeat: no-repeat، حيث تحدد المكان الدقيق لظهور الصورة المفردة.

/* كلمة مفتاحية واحدة (المحور الآخر يكون center افتراضياً) */
.top {
    background-position: top;        /* أعلى الوسط */
}
.bottom {
    background-position: bottom;     /* أسفل الوسط */
}
.left {
    background-position: left;       /* وسط اليسار */
}
.right {
    background-position: right;      /* وسط اليمين */
}
.centered {
    background-position: center;     /* وسط الوسط */
}

/* كلمتان مفتاحيتان */
.top-left {
    background-position: top left;
}
.bottom-right {
    background-position: bottom right;
}
.center-top {
    background-position: center top;
}

/* قيم النسبة المئوية: موضع الصورة نسبة إلى الحاوية */
.example1 {
    background-position: 50% 50%;   /* في المنتصف (مثل center center) */
}
.example2 {
    background-position: 0% 0%;     /* أعلى اليسار (مثل top left) */
}
.example3 {
    background-position: 100% 100%; /* أسفل اليمين */
}
.example4 {
    background-position: 25% 75%;   /* 25% من اليسار، 75% من الأعلى */
}

/* إزاحة بالبكسل من الزاوية العلوية اليسرى */
.pixel-offset {
    background-position: 20px 30px; /* 20px من اليسار، 30px من الأعلى */
}

/* خلط الوحدات */
.mixed {
    background-position: 50% 20px;  /* في الوسط أفقياً، 20px من الأعلى */
}

يعمل التموضع بالنسبة المئوية بشكل مختلف عما قد تتوقعه. عندما تكتب background-position: 25% 75%، يقوم المتصفح بمحاذاة النقطة التي تمثل 25% عبر الصورة مع النقطة التي تمثل 25% عبر الحاوية، وبالمثل للمحور العمودي. هذا يعني أن 50% 50% تقوم بتوسيط الصورة بشكل مثالي بغض النظر عن أبعاد الصورة أو الحاوية. قيم البكسل، في المقابل، تقوم ببساطة بإزاحة الزاوية العلوية اليسرى للصورة من الزاوية العلوية اليسرى للحاوية.

/* إزاحة من حواف محددة */
.edge-offset {
    /* 20px من الحافة اليمنى، 30px من الحافة السفلية */
    background-position: right 20px bottom 30px;
}

.another {
    /* 10px من الحافة اليسرى، 50px من الحافة العلوية */
    background-position: left 10px top 50px;
}

/* مفيد لوضع الأيقونات أو العناصر الزخرفية */
.card-icon {
    background-image: url('icon.svg');
    background-repeat: no-repeat;
    background-position: right 15px top 15px;
    padding-right: 50px; /* إفساح المجال للأيقونة */
}

خاصية background-size

تتحكم خاصية background-size في أبعاد صورة الخلفية. بدون هذه الخاصية، تُعرض الصور بحجمها الطبيعي (الجوهري)، والذي قد لا يتطابق مع أبعاد الحاوية. هذه الخاصية حاسمة للتصميم المتجاوب ولجعل صور الخلفية تتكيف مع أحجام الشاشات المختلفة.

/* auto: الحجم الطبيعي (الافتراضي) */
.natural {
    background-size: auto;
}

/* أبعاد محددة: العرض الارتفاع */
.fixed-size {
    background-size: 300px 200px;
}

/* قيمة واحدة: العرض فقط، الارتفاع يصبح auto (يحافظ على نسبة العرض إلى الارتفاع) */
.width-only {
    background-size: 300px;
    /* يعادل: background-size: 300px auto; */
}

/* نسبة مئوية من الحاوية */
.percentage {
    background-size: 50% 100%; /* نصف العرض، كامل الارتفاع */
}

/* cover: تحجيم لملء الحاوية بالكامل (قد يتم القص) */
.hero-cover {
    background-size: cover;
}

/* contain: تحجيم للاحتواء داخل الحاوية (قد تترك مساحة فارغة) */
.logo-contain {
    background-size: contain;
}

cover مقابل contain

أهم قيمتين كلمة مفتاحية لـ background-size هما cover و contain. فهم الفرق ضروري لصور الخلفية المتجاوبة.

cover تقوم بتحجيم الصورة لتكون أصغر ما يمكن مع الاستمرار في تغطية منطقة الحاوية بالكامل. ستملأ الصورة العنصر بأكمله بدون مساحة فارغة، لكن أجزاء من الصورة قد يتم قصها (إخفاؤها) إذا لم تتطابق نسبة العرض إلى الارتفاع للصورة مع نسبة العرض إلى الارتفاع للحاوية. هذا هو الخيار الأكثر شيوعاً لخلفيات البطل بملء الشاشة وصور البطاقات.

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

/* قسم البطل: الصورة تملأ المنطقة بالكامل، القص مقبول */
.hero {
    width: 100%;
    height: 80vh;
    background-image: url('landscape.jpg');
    background-size: cover;
    background-position: center center; /* التحكم في الجزء المرئي */
    background-repeat: no-repeat;
}

/* عرض الشعار: يجب أن يكون الشعار بالكامل مرئياً */
.company-logo {
    width: 200px;
    height: 100px;
    background-image: url('logo.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* النمط: حجم بلاطة محدد يتكرر */
.tile-pattern {
    background-image: url('tile.svg');
    background-size: 40px 40px;
    background-repeat: repeat;
}

خاصية background-attachment

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

/* scroll (الافتراضي): الخلفية تتحرك مع العنصر */
.normal {
    background-attachment: scroll;
}

/* fixed: الخلفية تبقى ثابتة بالنسبة لنافذة العرض */
.parallax {
    background-image: url('mountains.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

/* local: الخلفية تتحرك مع محتوى العنصر */
.scrollable-box {
    width: 300px;
    height: 200px;
    overflow: auto;
    background-image: url('watermark.png');
    background-attachment: local;
    background-repeat: no-repeat;
    background-position: center;
}

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

خاصية background-origin

تحدد خاصية background-origin منطقة التموضع لصور الخلفية -- بمعنى آخر، أين يبدأ نظام إحداثيات صورة الخلفية. تحدد نقطة المرجع لـ background-position وتؤثر على مكان بداية تجانب الخلفية.

/* padding-box (الافتراضي): الخلفية تبدأ من حافة الحشوة */
.default-origin {
    background-origin: padding-box;
}

/* border-box: الخلفية تبدأ من حافة الإطار */
.border-origin {
    border: 20px dashed rgba(0, 0, 0, 0.3);
    padding: 30px;
    background-image: url('pattern.png');
    background-origin: border-box;
    /* الصورة تبدأ من خلف الإطار */
}

/* content-box: الخلفية تبدأ من حافة المحتوى */
.content-origin {
    padding: 30px;
    background-image: url('logo.svg');
    background-origin: content-box;
    background-repeat: no-repeat;
    background-position: top left;
    /* الصورة تبدأ من أعلى يسار منطقة المحتوى، وليس الحشوة */
}

خاصية background-clip

بينما تتحكم background-origin في مكان بداية صورة الخلفية، تتحكم background-clip في مكان ظهور الخلفية فعلياً -- فهي تقص الخلفية إلى منطقة محددة من نموذج الصندوق. تؤثر هذه الخاصية على كل من background-color و background-image.

/* border-box (الافتراضي): الخلفية تمتد خلف الإطار */
.default-clip {
    background-clip: border-box;
}

/* padding-box: الخلفية تتوقف عند حافة الحشوة (ليس خلف الإطار) */
.padding-clip {
    border: 10px dashed #333;
    background-color: #3498db;
    background-clip: padding-box;
    /* الإطار المتقطع يُظهر خلفية العنصر الأب من خلال الفجوات */
}

/* content-box: الخلفية فقط في منطقة المحتوى */
.content-clip {
    padding: 30px;
    background-color: #e74c3c;
    background-clip: content-box;
    /* منطقة الحشوة شفافة، مما يخلق تأثير بصري مدمج */
}

/* text: الخلفية مرئية فقط من خلال النص (قص لشكل النص) */
.gradient-text {
    background-image: linear-gradient(45deg, #f093fb, #f5576c, #4facfe);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: 4rem;
    font-weight: bold;
}

القيمة text لـ background-clip هي واحدة من أكثر تأثيرات CSS إثارة بصرياً. تقص الخلفية لشكل النص، مما يتيح لك ملء النص بتدرجات لونية أو صور أو أنماط. لاحظ أنه يجب عليك أيضاً تعيين لون النص إلى transparent (باستخدام إما color: transparent أو -webkit-text-fill-color: transparent) لكي تظهر الخلفية من خلاله. لا تزال بادئة -webkit- مطلوبة لدعم أوسع للمتصفحات لقيمة text.

/* نص مملوء بصورة */
.image-text {
    background-image: url('forest.jpg');
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 6rem;
    font-weight: 900;
}

/* نص بتدرج لوني متحرك */
.animated-text {
    background-image: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff6b6b);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

خاصية background المختصرة

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

/* الصيغة الكاملة */
.element {
    background: [color] [image] [position] / [size] [repeat] [attachment] [origin] [clip];
}

/* أمثلة بسيطة */
.simple {
    background: #f5f5f5;
}

.with-image {
    background: url('bg.jpg') center / cover no-repeat;
}

.complete {
    background: #2c3e50 url('pattern.png') top left / 100px 100px repeat fixed;
}

/* المعادل بالخصائص الفردية */
.complete-longhand {
    background-color: #2c3e50;
    background-image: url('pattern.png');
    background-position: top left;
    background-size: 100px 100px;
    background-repeat: repeat;
    background-attachment: fixed;
}

صيغة / (الشرطة المائلة) حاسمة عند استخدام background-size في الخاصية المختصرة. يجب أن يأتي background-size مباشرة بعد background-position، مفصولاً بشرطة مائلة للأمام. بدون الشرطة المائلة، لا يستطيع المتصفح التمييز بين قيم الموضع وقيم الحجم. على سبيل المثال، center / cover تعني "الموضع: المركز، الحجم: تغطية" بينما center cover ستُفسر بشكل غير صحيح.

/* خلفيات متعددة مفصولة بفواصل */
.layered {
    background:
        url('top-pattern.svg') top left / 50px 50px repeat,
        url('decoration.png') right 20px bottom 20px / 100px no-repeat,
        linear-gradient(to bottom, #667eea, #764ba2);
    /* ملاحظة: background-color يمكن أن يكون فقط على الطبقة الأخيرة */
}

/* المعادل بالخصائص الفردية */
.layered-longhand {
    background-image:
        url('top-pattern.svg'),
        url('decoration.png'),
        linear-gradient(to bottom, #667eea, #764ba2);
    background-position:
        top left,
        right 20px bottom 20px,
        0 0;
    background-size:
        50px 50px,
        100px,
        auto;
    background-repeat:
        repeat,
        no-repeat,
        no-repeat;
}

صور الخلفية مقابل عناصر <img>

معرفة متى تستخدم صورة خلفية CSS مقابل عنصر <img> في HTML هو قرار تصميمي مهم يؤثر على إمكانية الوصول وتحسين محركات البحث والأداء.

استخدم صورة خلفية CSS عندما:

• الصورة تزيينية بحتة (أنماط، قوام، زخرفة بصرية)
• الصورة جزء من التصميم وليس المحتوى
• تحتاج الصورة خلف نص أو محتوى آخر
• تريد أن تملأ الصورة حاوية بغض النظر عن نسبة العرض إلى الارتفاع
• يجب ألا تظهر الصورة عند طباعة الصفحة
• تحتاج صوراً متعددة بطبقات على عنصر واحد

استخدم عنصر <img> في HTML عندما:

• الصورة محتوى (صور المنتجات، صور المقالات، الرسوم البيانية)
• الصورة تحتاج نصاً بديلاً لإمكانية الوصول وقارئات الشاشة
• الصورة يجب أن تُفهرس بواسطة محركات البحث لتحسين SEO
• تحتاج التحميل الكسول مع خاصية loading="lazy"
• تحتاج صوراً متجاوبة مع srcset و sizes
• الصورة يجب أن تكون مرئية عند طباعة الصفحة
• الصورة جزء من تدفق المستند وتؤثر على التخطيط

اعتبارات الأداء لصور الخلفية

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

• تحسين حجم الملف: اضغط الصور باستخدام أدوات مثل TinyPNG أو Squoosh أو ImageOptim. استخدم صيغاً حديثة مثل WebP (أصغر بنسبة 30-50% من JPEG) أو AVIF (أصغر حتى) مع بدائل احتياطية.
• استخدم أبعاداً مناسبة: لا تستخدم صورة بعرض 4000px لعنصر بعرض 400px. قم بتغيير حجم الصور لتتناسب مع حجم العرض (مع مراعاة شاشات عالية الكثافة -- عادة ضعف حجم العرض).
• فكر في التحميل الكسول: صور الخلفية تُحمّل فوراً. للأقسام أسفل منطقة الطي، استخدم Intersection Observer API لإضافة صور الخلفية فقط عندما تظهر الأقسام في العرض.
• تجنب الصور الكبيرة على الأجهزة المحمولة: استخدم استعلامات الوسائط لتقديم صور خلفية أصغر على الأجهزة المحمولة.
• استخدم تدرجات CSS بدلاً من الصور: يمكن في كثير من الأحيان تكرار أنماط بسيطة مثل الخطوط والنقاط وانتقالات الألوان باستخدام تدرجات CSS، وهي مستقلة عن الدقة وتُحمّل فوراً.

/* أولاً الأجهزة المحمولة: صورة صغيرة بشكل افتراضي */
.hero {
    background-image: url('hero-small.jpg');
    background-size: cover;
    background-position: center;
}

/* الأجهزة اللوحية: صورة متوسطة */
@media (min-width: 768px) {
    .hero {
        background-image: url('hero-medium.jpg');
    }
}

/* سطح المكتب: صورة كبيرة */
@media (min-width: 1200px) {
    .hero {
        background-image: url('hero-large.jpg');
    }
}

/* شاشات عالية الكثافة (Retina) */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    .hero {
        background-image: url('hero-large-2x.jpg');
    }
}

أمثلة عملية

المثال 1: قسم بطل بملء الشاشة

<!-- HTML -->
<section class="hero">
    <div class="hero-content">
        <h1>مرحباً بكم في موقعنا</h1>
        <p>بناء تجارب ويب مذهلة</p>
    </div>
</section>

/* CSS */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    background:
        linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)),
        url('hero-landscape.jpg') center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-content {
    text-align: center;
    color: white;
}

.hero-content h1 {
    font-size: 3.5rem;
    margin-bottom: 1rem;
}

.hero-content p {
    font-size: 1.5rem;
    opacity: 0.9;
}

المثال 2: بطاقة مع نمط خلفية

.card {
    background-color: #ffffff;
    background-image:
        radial-gradient(circle at 100% 0%, rgba(52, 152, 219, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(231, 76, 60, 0.1) 0%, transparent 50%);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* بطاقة مع نمط نقطي خفيف */
.card-dotted {
    background-color: #fafafa;
    background-image: radial-gradient(circle, #ddd 1px, transparent 1px);
    background-size: 20px 20px;
    border-radius: 12px;
    padding: 2rem;
}

المثال 3: أقسام المنظور (Parallax)

.parallax-section {
    height: 60vh;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.parallax-1 {
    background-image: url('mountain.jpg');
}

.parallax-2 {
    background-image: url('ocean.jpg');
}

.content-section {
    padding: 4rem 2rem;
    background-color: #fff;
}

/* تعطيل المنظور على الأجهزة المحمولة للأداء */
@media (max-width: 768px) {
    .parallax-section {
        background-attachment: scroll;
        height: 40vh;
    }
}

المثال 4: خلفيات أنماط CSS فقط

/* خطوط مائلة */
.diagonal-stripes {
    background-color: #3498db;
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255, 255, 255, 0.1) 10px,
        rgba(255, 255, 255, 0.1) 20px
    );
}

/* نقاط بولكا */
.polka-dots {
    background-color: #2c3e50;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.15) 10%, transparent 11%),
        radial-gradient(circle, rgba(255, 255, 255, 0.15) 10%, transparent 11%);
    background-size: 30px 30px;
    background-position: 0 0, 15px 15px;
}

/* خطوط الشبكة */
.grid-bg {
    background-color: #ffffff;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}