CSS

CSS Background Size
أحجام صور الخلفيات في لغة CSS

ستتعلم في هذا الدرس كيفية ضبط أبعاد أو حجم صور الخلفيات بإستخدام خاصية  background-size وستتعلم جميع القيم التي تُعين لهذة الخاصية في لغة CSS.

التاريخ

11 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2024

المواضيع

24
الشروحات chevron_left CSS Background Size chevron_left CSS
CSS Flex Box keyboard_arrow_down

CSS Background Size
أحجام صور الخلفيات في لغة CSS

</> CSS Background Size
أحجام صور الخلفيات في لغة CSS

تًستخدم خاصية background-size في التحكم في أبعاد ( طول وعرض ) صور الخلفيات في لغة CSS, يجب أن يتم تعيين عرض وطول صورة الخلفية مقارب إلي حجم الصورة الأصلي.

  • يجب أن تُستخدم خاصية background-image لكي تعمل خاصية background-size.


قيم خاصية background-size:

  • auto وهي القيمة الأفتراضية وهي عرض صورة الخلفية بالحجم الطبيعي.
  • length وهي عرض أبعاد ( طول وعرض ) الصورة بوحدة pixel بكسل.
  • percentage وهي عرض أبعاد ( طول وعرض ) الصورة بالنسبة المئوية %.
  • cover ضبط الخلفية بحجم container العنصر التي تتفرع منه الخلفية.
  • contain يتم تعيين صورة الخلفية علي أساس ظهور كامل للرسمة الداخلية للصورة.
  • initial إعادة ضبط أبعاد صورة الخلفية إلي الحجم الطبيعي.
  • inherit هي توريث حجم الصورة من عنصر الأب parent.
background-size:auto|length|percentage|cover|contain|initial|inherit;

</> CSS background auto size
ضبط حجم الصورة للحجم التلقائي والأصلي في لغة CSS

عن طريق إسخدام القيمة auto مع خاصية background-size فسوف يتم تعيين أبعاد ( طول وعرض ) صور الخلفيات في لغة CSS للحجم الطبيعي للصورة الخلفية.

CSS background auto size

تظهر الصورة كما هي في الوضع الطبيعي بأستخدام قيم auto مع خاصية background size.

body
{
background-image: url("https://www.closetag.com/images/background.jpg");
background-size:auto;
}

</> CSS background length size
ضبط حجم الصورة بوحدة pixel في لغة CSS

عن طريق إسخدام القيمة pixel مع خاصية background-size فسوف يتم تعيين أبعاد ( طول وعرض ) بحجم محدد في لغة CSS.

  • يمكن التحكم في طول وعرض بقيم مختلفة وهي كتابة قيمتين في خاصية background-size لتصبح ;background-size:300px 500px حيث أن القيمة الأولي للعرض والثانية للطول.
CSS background length size

تظهر الصورة بحجم محدد بأستخدام قيم وحدة pixel مع خاصية background size.

body
{
background-image:url("https://www.closetag.com/images/background.jpg");
background-size:200px;
}
CSS background size height and width

يتم تعيين قيميتين مع خاصية background-size فيمة للعرض وقيمة للطول.

body
{
background-image:url("https://www.closetag.com/images/background.jpg");
background-size:400px 200px;
}

</> CSS background percentage size
ضبط حجم الصورة بالنسبة المئوية في لغة CSS

عن طريق إسخدام القيمة percentage مع خاصية background-size فسوف يتم تعيين أبعاد ( طول وعرض ) بحجم محدد بالنسبة المئوية في لغة CSS.

  • يمكن التحكم في طول وعرض بقيم مختلفة وهي كتابة قيمتين في خاصية background-size لتصبح ;background-size:100% 70% حيث أن القيمة الأولي للعرض والثانية للطول.
CSS background percentage size

تظهر الصورة بحجم محدد بأستخدام قيم وحدة pixel مع خاصية background size.

body
{
background-image:url("https://www.closetag.com/images/background.jpg");
background-size:50%;
}
CSS background size percentage height and width

يتم تعيين قيميتين مع خاصية background-size قيمة للعرض وقيمة للطول بالنسبة المئوية.

body
{
background-image:url("https://www.closetag.com/images/background.jpg");
background-size:100% 70%;
}

</> CSS background contain size
عرض رسمة الصورة بوضوح لغة CSS

عن طريق إسخدام القيمة contain مع خاصية background-size فسوف يقيس المتصفح الصورة بأكبر قدر ممكن داخل حاويتها بدون إقتصاص الصورة أو تمديدها. إذا كانت الحاوية أكبر من الصورة، فسيؤدي ذلك إلى تقسيم الصورة علي المساحة.

CSS background without contain size

تظهر الصورة بحجم محدد مختلف عن حجم قيمة contain لاحظ بدون قيمة contain.

body
{
background-image:url("https://www.closetag.com/images/background.jpg");
}
CSS background contain size

عن طريق قيمة contain مع background-size سوف يتم ظهور الصورة بكشل مختلف عن الوضع الطبيعي

body
{
background-image:url("https://www.closetag.com/images/background.jpg");
background-size:contain;
}

</> CSS background cover size
عرض صورة الخلفية بقيمة cover في لغة CSS

عن طريق إسخدام القيمة cover مع خاصية background-size فسوف يتم ملئ مساحة الحاوية container التي يتفرع منها خلفية الصورة يعني العنصر الأب parent element.

CSS background without cover size

تظهر الصورة بدون ملئ الشاشة بدون قيمة cover مع CSS background size.

body
{
background-image:url("https://www.closetag.com/images/background.jpg");
}
CSS background cover size

تظهر الصورة بملئ الشاشة بإستخدام قيمة cover مع CSS background size.

body
{
background-image:url("https://www.closetag.com/images/background.jpg");
background-size:cover;
}

</> CSS background initial size
عرض صورة الخلفية بقيمة initial في لغة CSS

عن طريق إسخدام القيمة initialمع خاصية background-size فسوف يتم إرجاء حجم الخلفية كما كان في الحجم الأفتراضي.

CSS background initial size

إعادة الخلفية للحجم الطبيعي قبل إستخدام قيمة cover.

body
{
background-image:url("https://www.closetag.com/images/background.jpg");
background-size:cover;
background-size:initial;
}
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.