CSS background-Size

-

في هذه الخاصية يتم التحكم بحجم الصورة في الخلفية بحيث يمكن تحديد القيمة auto او قيمة محدد ب البكسل pixels  

مثال :
بدل من كتابة الكود : 
body {
  background-image: url("img/bellAlert.gif");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: local;
  background-size: auto;

}

في هذا المثال سيتم تطبق حجم الصورة كما هي. 

المثال الثاني تغيير الحجم ب pixels  

body {
  background-image: url("img/bellAlert.gif");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: local;
  background-size: 300px 300px;
}



سيتم في هذا المثال تعديل حجم الصورة الى 300*300 
شغل الصفحة وتحقق من النتيجة

القيم المتوفرة في هذه الخاصية هي 


القيمة 
الوصف
auto
الصورة في الخلفية تعرض بنفس الحجم. هذا هو الافتراضي
length
يضبط العرض والارتفاع لصورة الخلفية. حيث تحدد القيمة الأولى العرض، بينما تحدد القيمة الثانية الارتفاع. إذا تم إعطاء قيمة واحدة فقط، تكون القيمة الثانية مساوية للقيمة الاولى. 
percentage
يضبط العرض والارتفاع لصورة الخلفية  لنسبة مئوية %. حيث تحدد القيمة الأولى العرض، بينما تحدد القيمة الثانية الارتفاع. إذا تم إعطاء قيمة واحدة فقط، تكون القيمة الثانية مساوية للقيمة الاولى.
cover
يتم تغيير حجم صورة الخلفية لتغطية element  بأكملها ، قد يحدث تمديد للصورة أو قص قليلاً من أحد الأطراف لتتناسب مع element 
contain
يتم تغيير حجم صورة الخلفية للتأكد من عرض الصورة بشكل كامل
initial
يتم تطبيق القيمة الافتراضية.
inherit
يرث هذه الخاصية من parent element.