شرح خاصية background-size للتحكم في حجم صورة الخلفية

أهلا بكم في درس جديد من دروس css وفي هذا الدرس سوف نتعرف على خاصية جديدة من خواص css وهي خاصية background-size من خلال استخدام هذه الخاصية يمكننا التحكم فى حجم صورة الخلفية تعلمنا في الدروس السابقة خاصية background-img لإضافة صورة كخلفية وأيضا تعلمنا خاصية background-repeat للتحكم في تكرار الصورة ، أما في هذا الدرس سوف نتعرف على خاصية background-size

background-size


background-size:cover; /*جعل الصورة أكبر حجم*/
background-size:contain; /*جعل الصورة أصغر حجم*/
background-size:100px; /*للتحكم في عرض الصورة فقط وسيتم تنسيق الارتفاع تلقائيا*/
background-size:125px 100px;  /*للتحكم في عرض الصورة بنسة 125 بيكسل والارتفاع بنسبة 100 بيكسل*/

background-size:cover


body {
    background-image: url(https://lh3.googleusercontent.com/-wz_uVYrh0YI/WLrXjKYRI_I/AAAAAAAAMaI/BmIXx4tzQEo78jgkPRXeRIDI3rB89So0wCLcB/h104/code_wap.png);
    background-size: cover;
    background-repeat: no-repeat; /*عدم تكرار الخلفية*/
}

background-size:contain


body {
    background-image: url(https://lh3.googleusercontent.com/-wz_uVYrh0YI/WLrXjKYRI_I/AAAAAAAAMaI/BmIXx4tzQEo78jgkPRXeRIDI3rB89So0wCLcB/h104/code_wap.png);
    background-size: contain;
    background-repeat: no-repeat; /*عدم تكرار الخلفية*/
}

background-size:contain


body {
    background-image: url(https://4.bp.blogspot.com/-1WKgdyFGXXM/WO_ML1q2QlI/AAAAAAAAMm0/OLiA87iRm2cE8cPheHupvgMRE1LNTmSxwCLcB/s1600/4.jpg);
    background-size: 150px 200px;
    background-repeat: repeat; /*تكرار الخلفية*/
}