كيفية امتداد صورة خلفية لتناسب صفحة ويب

امنح موقعك اهتمامًا مرئيًا برسوم خلفية

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

إذا بدأت العمل مع صور الخلفية ، فستشغل بدون شك في السيناريو حيث تريد أن تمتد الصورة لتلائم الصفحة.

ينطبق هذا بشكل خاص على مواقع الويب المتجاوبة التي يتم تسليمها لمجموعة واسعة من الأجهزة وأحجام الشاشات .

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

أفضل طريقة لتمديد صورة لملائمة خلفية الصفحة هي استخدام خاصية CSS3 ، لحجم الخلفية. في ما يلي مثال يستخدم صورة خلفية لجسم الصفحة ويضبط الحجم إلى 100٪ بحيث يتم امتداده دائمًا ليلاءم الشاشة.

الجسم {
background: url (bgimage.jpg) no-repeat؛
حجم الخلفية: 100٪
}

وفقًا لموقع caniuse.com ، تعمل هذه الخاصية في IE 9+ و Firefox 4+ و Opera 10.5+ و Safari 5+ و Chrome 10.5+ وعلى جميع متصفحات الجوال الرئيسية. هذا يغطي لك جميع المتصفحات الحديثة المتاحة اليوم ، مما يعني أنه يجب عليك استخدام هذه الخاصية دون خوف من أنها لن تعمل على شاشة شخص ما.

Faking خلفية تمدد في المستعرضات الأقدم

من المستبعد أن تحتاج إلى دعم أي متصفح أقدم من IE9 ، ولكن لنفترض أنك قلق من أن IE8 لا يدعم هذه الخاصية. في تلك الحالة ، يمكنك مزيف خلفية ممتدة. ويمكنك استخدام بادئات المتصفح لـ Firefox 3.6 (-moz-background-size) و Opera 10.0 (-o-background-size).

تتمثل أسهل طريقة لتزوير صورة خلفية ممتدة في امتدادها عبر الصفحة بأكملها. ثم لا ينتهي الأمر مع مساحة إضافية أو أن تقلق من أن النص الخاص بك يناسب في منطقة امتدت. هيريس كيفية القيام بذلك:

id = "bg" />

1. أولاً ، تأكد من أن جميع المتصفحات تحتوي على ارتفاع بنسبة 100٪ ، وهوامش 0 ، وحشو 0 على عناصر HTML BODY. ضع ما يلي في رأس مستند HTML الخاص بك:

2. أضف الصورة التي تريد أن تكون الخلفية كالعنصر الأول لصفحة الويب ، وأعطها معرف "bg":

3. ضع صورة الخلفية بحيث تكون ثابتة في الأعلى واليسار وهي 100٪ و 100٪ في الارتفاع. أضف هذا إلى ورقة الأنماط الخاصة بك:

   img # bg {
   الموقع: ثابت
   أعلى: 0 ؛
   اليسار: 0 ؛
   العرض: 100 ٪.
   الارتفاع: 100٪ ؛
   }

4. إضافة كل المحتوى الخاص بك إلى الصفحة داخل عنصر DIV مع معرف "المحتوى". إضافة DIV أسفل الصورة:

   كل المحتوى الخاص بك هنا - بما في ذلك الرؤوس والفقرات ، وما إلى ذلك

   ملاحظة: من المثير للاهتمام أن ننظر إلى صفحتك الآن. يجب أن تظهر الصورة ممتدة ، ولكن المحتوى الخاص بك مفقود تمامًا. لماذا ا؟ نظرًا لأن صورة الخلفية هي 100٪ في الارتفاع ، ويكون قسم المحتوى بعد الصورة في تدفق المستند - لن تعرض معظم المتصفحات.
   
5. ضع المحتوى الخاص بك بحيث يكون نسبيًا ويحتوي على فهرس z من 1. سيؤدي ذلك إلى جعله أعلى من صورة الخلفية في المتصفحات المتوافقة مع المعايير. أضف هذا إلى ورقة الأنماط الخاصة بك:

   #يحتوى {
   موقف: قريب
   ض مؤشر: 1.
   }

1. لكنك لم تنته لا يتوافق Internet Explorer 6 مع المعايير ولا يزال يواجه بعض المشاكل. هناك العديد من الطرق لإخفاء CSS من كل متصفح ولكن IE6 ، ولكن أسهلها (وأقلها إحتمال حدوث مشكلات أخرى) هي استخدام التعليقات الشرطية. ضع ما يلي بعد ورقة الأنماط في رأس المستند الخاص بك:

2. داخل التعليق المميز ، أضف ورقة أنماط أخرى مع بعض الأنماط للحصول على IE 6 للعب بشكل جميل:

3. تأكد من اختبار في IE 7 و IE 8 كذلك. قد تحتاج إلى تعديل التعليقات لدعمها أيضًا. ومع ذلك ، عملت عندما اختبرت ذلك.

موافق - وهذا هو المبالغة WIK. عدد قليل جدا من المواقع تحتاج إلى دعم IE 7 أو 8 بعد الآن ، أقل بكثير IE6!

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

Faking a Stretched Background Image على مساحة أصغر

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

1. ضع الصورة على الصفحة التي أريد استخدامها كخلفية.

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

   img # bg {
   العرض: 20
   الطول: 30em؛
   }

3. ضع المحتوى الخاص بك في div مع "محتوى" معرف كما فعلنا أعلاه:

   كل المحتوى الخاص بك هنا

4. صمم div للمحتوى ليكون بنفس العرض والارتفاع كصورة الخلفية:

   div # content {
   العرض: 20
   الطول: 30em؛
   }

5. ثم ضع المحتوى على نفس ارتفاع الصورة. لذا إذا كانت صورتك في 30 يومًا ، سيكون لديك نمط أعلى: -30 لا تنس وضع مؤشر z 1 على المحتوى.

   #يحتوى {
   موقف: قريب
   top: -30em؛
   ض مؤشر: 1.
   العرض: 20
   الطول: 30em؛
   }

6. ثم قم بإضافة فهرس z -1 لمستخدمي IE 6 ، كما فعلت أعلاه:

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

وإذا كان حجم المحتوى الخاص بك يتغير ، فستحتاج إلى تغيير حجم الحاوية وصورة الخلفية ، وإلا ستنتهي بنتائج غريبة.