CSS background-image

-

من خلال هذه الخاصية يمكن التحكم بخلفية Elements واضافة صورة. وبشكل افتراضي الصورة في الخلفية يتم تكرارها repeated  حتي تغطي العنصر كامل. 


تمام حتي نفهم اكثر نطبق مثال عملي : 


تمام نرجع للملف backgroundcolor ونعدل في كود CSS الى الاتي:


<!DOCTYPE html>
<style>
div{
    background-color: green;
    opacity: 1;
    font-size: 25px;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    
}
body
{
    background-image: url("img/bg5.jpg");
}
</style>
<html>
<body>
    <div>
        
        <p> DIV1 Elements تطبيق الخلفية على</p>
    </div>
    <div>
        
        <p> DIV2 Elements تطبيق الخلفية على</p>
    </div>
    <footer></footer>
</body>
</html>





شغل الصفحة وشوف النتيجة:



نرجع للكود ونفهم ايش كتبنا: 

اضفنا الكود التالي 

body
{
    background-image: url("img/bg5.jpg");
}

هذا الكود بعمل على تحدد لون خلفية لصفحة HTML كاملة لان تم الاضافة الى Body. اذا كان المطلوب تغيير لون الخلفية ل Div كل المطلوب منك تزيد هذا الكود في Div 
واكيد لازم تحدد مكان الصورة المطلوب تكون خلفية للصفحة، في مثالنا هنا استخدمنا مجلد باسم img واضفنا الصورة  فيه.