انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 27
دورة لغة CSS

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
7
الأمثلة
11
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
6,506
محتوى الدرس
في هذا الدرس 7تصفّح المواضيع

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

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

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


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

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

HTML 
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.

HTML 
body
{
background-image:url("https://www.closetag.com/images/background.jpg");
background-size:200px;
}
جرّب بنفسك

CSS background size height and width

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

HTML 
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.

HTML 
body
{
background-image:url("https://www.closetag.com/images/background.jpg");
background-size:50%;
}
جرّب بنفسك

CSS background size percentage height and width

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

HTML 
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.

HTML 
body
{
background-image:url("https://www.closetag.com/images/background.jpg");
}
جرّب بنفسك

CSS background contain size

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

HTML 
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.

HTML 
body
{
background-image:url("https://www.closetag.com/images/background.jpg");
}
جرّب بنفسك

CSS background cover size

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

HTML 
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.

HTML 
body
{
background-image:url("https://www.closetag.com/images/background.jpg");
background-size:cover;
background-size:initial;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…