CSS Background Size
أحجام صور الخلفيات في لغة CSS
ستتعلم في هذا الدرس كيفية ضبط أبعاد أو حجم صور الخلفيات بإستخدام خاصية background-size وستتعلم جميع القيم التي تُعين لهذة الخاصية في لغة CSS.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
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;
}
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
