البرنامج التعليمي لحجم صورة الخلفية في CSS - كيفية ترميز صورة خلفية كاملة الصفحة

سيوضح لك هذا البرنامج التعليمي طريقة بسيطة لترميز صورة خلفية كاملة الصفحة باستخدام CSS. وستتعلم أيضًا كيفية جعل هذه الصورة تستجيب لحجم شاشة المستخدمين.

إن جعل صورة الخلفية تمتد بالكامل لتغطية إطار عرض المتصفح بالكامل مهمة شائعة في تصميم الويب. لحسن الحظ ، يمكن تنفيذ هذه المهمة ببضعة أسطر من CSS.

منفذ عرض الغلاف مع صورة

أولاً ، نريد التأكد من أن صفحتنا تغطي فعليًا إطار العرض بالكامل:

html { min-height: 100%; }

في الداخل html، سوف نستخدم background-imageالخاصية لضبط الصورة:

background-image: url(image.jpg); /*replace image.jpg with path to your image*/

سحر خاصية "حجم الخلفية"

السحر يحدث مع background-sizeالعقار:

background-size: cover;

coverيخبر المتصفح بالتأكد من أن الصورة تغطي دائمًا الحاوية بأكملها ، في هذه الحالة html. سيغطي المتصفح الحاوية حتى إذا كان عليه تمديد الصورة أو قصها قليلاً من الحواف.

نظرًا لأن المتصفح قد يمد الصورة ، يجب عليك استخدام صورة خلفية ذات دقة عالية بما يكفي. وإلا فقد تظهر الصورة منقطة.

إذا كنت مهتمًا بظهور كل الصور في الخلفية ، فستحتاج إلى التأكد من أن الصورة قريبة نسبيًا من نسبة العرض إلى الارتفاع مقارنة بحجم الشاشة.

كيفية ضبط موضع الصورة وتجنب التبليط

يمكن للمتصفح أيضًا اختيار عرض صورة الخلفية على شكل مربعات حسب حجمها. لمنع حدوث ذلك ، استخدم no-repeat:

background-repeat: no-repeat;

للحفاظ على الأشياء جميلة ، سنحافظ على صورتنا تتمحور دائمًا:

background-position: center center;

سيؤدي ذلك إلى توسيط الصورة أفقيًا وعموديًا في جميع الأوقات.

لقد أنتجنا الآن صورة سريعة الاستجابة تغطي دائمًا الخلفية بأكملها:

html { min-height: 100%; background-image: url(image.jpg); background-size: cover; background-repeat: no-repeat; background-position: center center; } 

كيفية إصلاح صورة في مكانها عند التمرير

الآن ، فقط في حالة رغبتك في إضافة نص أعلى صورة الخلفية وتجاوز هذا النص إطار العرض الحالي ، قد ترغب في التأكد من بقاء صورتك في الخلفية عندما يقوم المستخدم بالتمرير لأسفل لرؤية بقية النص:

background-attachment: fixed;

يمكنك تضمين جميع خصائص الخلفية الموضحة أعلاه باستخدام تدوين قصير:

background: url(image.jpg) center center cover no-repeat fixed;

اختياري: كيفية إضافة استعلام وسائط للجوال

لإضافة بعض التزيين إلى الكعكة ، قد ترغب في إضافة استعلام وسائط لشاشات أصغر:

@media only screen and (max-width: 767px) { html { background-image: url(smaller-image.jpg); } } 

يمكنك استخدام Photoshop أو بعض برامج تحرير الصور الأخرى لتقليل حجم صورتك الأصلية لتحسين سرعة تحميل الصفحة على اتصالات الإنترنت عبر الهاتف المحمول.

والآن بعد أن عرفت سحر إنشاء خلفية صورة صفحة كاملة سريعة الاستجابة ، فقد حان الوقت لإنشاء بعض مواقع الويب الجميلة!

تريد أن ترى المزيد من نصائح تطوير الويب والمعرفة؟

  • اشترك في رسالتي الإخبارية الأسبوعية
  • قم بزيارة مدونتي في 1000 Mile World
  • تابعني على تويتر