خاصية حجم الخلفية في CSS
مثال
حدد حجم صورة الخلفية باستخدام "تلقائي" وبالبكسل:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: auto;
}
#example2 {
background: url(mountain.jpg);
background-repeat:
no-repeat;
background-size: 300px 100px;
}
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تحدد الخاصية حجم background-sizeصور الخلفية.
هناك أربعة صيغ مختلفة يمكنك استخدامها مع هذه الخاصية: بناء جملة الكلمات الرئيسية ("تلقائي" و "غطاء" و "يحتوي على") ، وبناء جملة ذات قيمة واحدة (يحدد عرض الصورة (يصبح الارتفاع "تلقائي") ، بناء جملة ثنائي القيم (القيمة الأولى: عرض الصورة ، القيمة الثانية: الارتفاع) ، صيغة الخلفية المتعددة (مفصولة بفاصلة).
| القيمة الافتراضية: | تلقاءي |
|---|---|
| وارث: | رقم |
| متحرك: | نعم. اقرأ عن animatable |
| الإصدار: | CSS3 |
| بناء جملة JavaScript: | الكائن .style.backgroundSize = "60 بكسل 120 بكسل" |
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.
الأرقام متبوعة بـ -webkit- أو -moz- أو -o- تحدد الإصدار الأول الذي يعمل مع بادئة.
| Property | |||||
|---|---|---|---|---|---|
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
بنية CSS
background-size: auto|length|cover|contain|initial|inherit;
قيم الملكية
| Value | Description | Play it |
|---|---|---|
| auto | Default value. The background image is displayed in its original size | |
| length | Sets the width and height of the background image. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto". Read about length units | |
| percentage | Sets the width and height of the background image in percent of the parent element. The first value sets the width, the second value sets the height. If only one value is given, the second is set to "auto" | |
| cover | Resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges | |
| contain | Resize the background image to make sure the image is fully visible | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
مزيد من الأمثلة
مثال
حدد حجم صورة الخلفية بالنسبة المئوية:
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 100%
100%;
}
#example2 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 75%
50%;
}
مثال
حدد حجم صورة الخلفية بـ "الغلاف":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
}
مثال
حدد حجم صورة الخلفية باستخدام "تحتوي على":
#example1 {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain;
}
مثال
هنا لدينا صورتان للخلفية. نحدد حجم صورة الخلفية الأولى بـ "تحتوي" ، والثانية مع صورة الخلفية بـ "الغلاف":
#example1 {
background: url(img_tree.gif), url(mountain.jpg);
background-repeat: no-repeat;
background-size:
contain, cover;
}
مثال
استخدم خصائص خلفية مختلفة لإنشاء صورة "رئيسية":
.hero-image {
background-image: url("photographer.jpg"); /* The
image used */
background-color: #cccccc; /* Used if the image is
unavailable */
height: 500px; /* You must set a specified height */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
}
الصفحات ذات الصلة
دروس CSS: خلفيات CSS
مرجع DOM HTML: خاصية backgroundSize