صور خلفية HTML
يمكن تحديد صورة الخلفية لأي عنصر HTML تقريبًا.
صورة الخلفية على عنصر HTML
لإضافة صورة خلفية إلى عنصر HTML ، استخدم styleسمة HTML background-imageوخاصية CSS:
مثال
أضف صورة خلفية إلى عنصر HTML:
<div style="background-image: url('img_girl.jpg');">
يمكنك أيضًا تحديد صورة الخلفية في <style>
العنصر ، في <head>
القسم:
مثال
حدد صورة الخلفية في <style>
العنصر:
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
صورة الخلفية على الصفحة
إذا كنت تريد أن تحتوي الصفحة بأكملها على صورة خلفية ، فيجب عليك تحديد صورة الخلفية على <body>العنصر:
مثال
أضف صورة خلفية للصفحة بأكملها:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
تكرار الخلفية
إذا كانت صورة الخلفية أصغر من العنصر ، فستكرر الصورة نفسها أفقيًا وعموديًا حتى تصل إلى نهاية العنصر:
مثال
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
لتجنب صورة الخلفية من تكرار نفسها ، اضبط background-repeatالخاصية على no-repeat.
مثال
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
غلاف الخلفية
إذا كنت تريد أن تغطي صورة الخلفية العنصر بأكمله ، يمكنك تعيين background-sizeالخاصية على
cover.
أيضًا ، للتأكد من تغطية العنصر بالكامل دائمًا ، اضبط
background-attachmentالخاصية علىfixed:
بهذه الطريقة ، ستغطي صورة الخلفية العنصر بأكمله ، بدون تمدد (ستحتفظ الصورة بنسبها الأصلية):
مثال
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
امتداد الخلفية
إذا كنت تريد أن تمتد صورة الخلفية لتناسب العنصر بأكمله ، فيمكنك تعيين background-sizeالخاصية على
100% 100%:
حاول تغيير حجم نافذة المتصفح ، وسترى أن الصورة ستمتد ، لكنها ستغطي العنصر بأكمله دائمًا.
مثال
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
اعرف المزيد CSS
من الأمثلة أعلاه ، تعلمت أنه يمكن تصميم صور الخلفية باستخدام خصائص خلفية CSS.
لمعرفة المزيد حول خصائص خلفية CSS ، قم بدراسة البرنامج التعليمي لخلفية CSS الخاص بنا .