إذا كنت تستخدم شاشة كمبيوتر عريضة ففرصة مشاهدتك للفراغ الذي بين صورة خلفية الموقع وأركان المتصفح أكبر من الذين يتصفحون بشاشات متوسطة العرض، بينما لن تظهر في شاشات الجوال والأجهزه اللوحية غالباً. وهي من الأمور التي قد يغفل عنها مصممي المواقع، بل قد تراها في بعض قوالب بلوجر الرسمية !
هناك عدة حلول وفيما يلي أبسطها على الإطلاق وهي باستخدام خاصية background-size أحد مميزات CSS3 :
body {
background-size: cover;
}
وهذه هي النتيجة:
هناك عدة قيم للخاصية background-size أهما :
← cover وهي التي استخدمناها هنا وتعني مدد الصورة لتغطية جميع القسم div ولو تطلب الأمر اخفاء بعض الصورة.
← contain اظهار الصورة "كاملة" ولو تتطلب الأمر ترك فراغات بينها وبين أركان المتصفح.
ملاحظات:
- نفس الفكرة تطبق على أي قسم div يحتوي على صورة للخلفية.
- تمدد الصور الصغيرة وتشوهها يؤدي أحياناً إلى تصميم جميل!
- جميع المتصفحات الحديثة تدعم هذه الخاصية : كروم ، فيرفوكس ، سفاري ، IE9+
تحياتي العاطرة
التعليقات: 0
إرسال تعليق