background-image

خاصية صورة الخلفية background-image

خاصية background-image تضع صورة أو تدرجًا لونيًا خلفية للعنصر — والتدرجات linear وradial أدوات الجمال الحديثة الأولى.

وجهان لها: صور حقيقية عبر url() لخلفيات الأبطال والأقسام، و**التدرجات المولدة** — نجم العصر بلا ملفات إطلاقًا: linear-gradient بزاوية ولونين+ للخلفيات الحية، وradial-gradient للبقع الضوئية (الـ orbs أعلى صفحات هذا الموقع بالوضع الفاتح = ثلاث radial متراكبة حرفيًا!).

قوة خفية: تقبل طبقات متعددة بفواصل — الأقرب أولًا؛ ووصفة النص-فوق-صورة الخالدة: تدرج تعتيم شفاف→أسود فوق الصورة نفسها بسطر واحد.

الصياغة

.hero {
  background-image:
    linear-gradient(rgb(0 0 0/0) 40%, rgb(0 0 0/.7)),
    url("hero.jpg");
  background-size: cover;
}

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<style>
  .g { height: 90px; border-radius: 12px; margin-bottom: 8px; display: grid; place-items: center; color: white; font-weight: bold; }
</style>
<div class="g" style="background-image: linear-gradient(120deg, #7c5cff, #22d3ee)">تدرج خطي 120°</div>
<div class="g" style="background-image: radial-gradient(circle at 30% 30%, #7c5cff, #17151d)">تدرج شعاعي — orb</div>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
url("...")	صورة ملف — مع cover وposition من الشقيقات
linear-gradient(زاوية, ألوان)	تدرج خطي — خلفيات وأزرار حية
radial-gradient(shape at x y, ...)	تدرج شعاعي — توهجات وبقع ضوئية
طبقات بفواصل	تراكب: تعتيم فوق صورة، توهجات متعددة

💡 نصائح عملية

نص فوق صورة: طبقة تدرج معتم فوقها — الوصفة الأثبت للقراءة
تدرج هادئ = لونان متقاربان؛ التدرجات الصارخة بصمة قوالب رخيصة

⚠️ أخطاء شائعة

صورة خلفية حاملة معنى — الصور الدلالية لوسم img مع alt
نسيان background-size: cover فتتبلط الصورة مكررة

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار CSS الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs