كيف - صورة كاملة الصفحة
تعرف على كيفية إنشاء صورة خلفية كاملة الصفحة باستخدام CSS.
صورة صفحة كاملة
تعرف على كيفية إنشاء صورة خلفية تغطي نافذة المتصفح بالكامل. يوضح المثال التالي صورة خلفية سريعة الاستجابة بملء الشاشة (ونصف شاشة):
عرض توضيحي - صورة خلفية بملء الصفحة
عرض توضيحي - صورة خلفية نصف صفحة
كيفية إنشاء صورة كاملة الارتفاع
استخدم عنصر حاوية وأضف صورة خلفية إلى الحاوية باستخدام height: 100%
.
نصيحة: استخدم 50٪ لإنشاء صورة خلفية نصف صفحة. ثم استخدم خصائص الخلفية التالية لتوسيط الصورة وقياسها بشكل مثالي:
ملاحظة: للتأكد من أن الصورة تغطي الشاشة بأكملها ، يجب عليك أيضًا التقديم height: 100%
على كل من <html> و <body>:
مثال
body, html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("img_girl.jpg");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
صورة خلفية نصف صفحة:
مثال
.bg {
height: 50%;
}