شرح صفوف ومحتوى الفقرة
يمكن أن تكون الصورة الكبيرة مثالية على شاشة الكمبيوتر الكبيرة ، ولكنها غير متناسبة مع الأجهزة الصغيرة, فالحل هو خلفيتين بماقسات مختلفة تظهر خلفية علي أجهزة كبيرة وخلفية أخري علي أجهزة أصغر ويتم ذلك عن طريق media query وهي تبديل الصورة علي الحجم المناسب للأجهزة الصغيرة.
CSS Responsive background image different devices
سوف تتغير الصورة عندما يكون حجم الشاشة أصغر من 400px قم بتصغير نافذة المتصفح لأقل من 400 وشاهد تغيير الصورة الأصلية إلي صورة أخري.
HTML
body {
background-repeat: no-repeat;
background-image: url('https://www.closetag.com/images/paris.jpg');
}
/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url('https://www.closetag.com/images/photo1.jpg');
}