شرح خاصية background-image لإضافة صورة كخلفية

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

خاصية background-image

قم باستبدال رمز # بمسار أو رابط الصورة


background-image:url(#);

مثال 1

نفترض أن لديك مجلد بإسم demo وبداخل هذا المجلد يوجد ملف بإسم index.html وملف بإسم style.css وصورة بإسم bg.jpg ، فيكون مسار الصورة الصحيح كالتالي


body {
   background-image:url(bg.jpg);
}

مثال 2

نفترض أن لديك مجلد بإسم demo وبداخل هذا المجلد يوجد ملف بإسم index.html وصورة بإسم bg.jpg ومجلد باسم css وبداخل مجلد css يوجد ملف بإسم style.css ، فيكون مسار الصورة الصحيح كالتالي


body {
   background-image:url(../bg.jpg);
}

مثال 3

كما يمكنك تضمين صورة من الانترنت كخلفية للصفحة وذلك من خلال إضافة رابط الصورة مباشرة كما في المثال التالي


body {
   background-image:url(https://1.bp.blogspot.com/-N-5oiI-BNeA/Xmd7YpTwVXI/AAAAAAAABns/TSuXDZRC2bQdUJiEi4C7yOfrzA6ngRvfgCLcBGAsYHQ/s320/css.jpeg);
}