HTML - Background Images خلفيات الصور
🌄 الخلفيات باستخدام الصور في HTML
لإضافة صورة كخلفية لصفحة ويب أو لعناصر معينة داخل الصفحة، نستخدم خاصية background-image في CSS.
✅ الصيغة الأساسية:
body {
background-image: url("background.jpg");
}
⬅ هذا الكود يضيف صورة background.jpg كخلفية لكامل الصفحة.
🧪 مثال عملي:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("background.jpg");
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<h1>مرحبًا بك في موقعي!</h1>
<p>هذه الصفحة تحتوي على صورة كخلفية.</p>
</body>
</html>
📌 خصائص إضافية:
background-repeat: يتحكم في تكرار الصورة (مثلno-repeat).background-size: يتحكم في حجم الصورة (مثلcoverلملء الصفحة).background-position: لتحديد موقع الصورة داخل العنصر.background-attachment: لتثبيت الصورة أثناء التمرير (مثلfixed).
🎨 مثال متقدم:
body {
background-image: url("bg-pattern.png");
background-repeat: repeat-x;
background-position: top;
background-size: contain;
}
💡 الخلفيات باستخدام الصور تمنح مظهرًا بصريًا جذابًا للمواقع ويمكن التحكم بها بالكامل عبر CSS.
تعليقات
إرسال تعليق