لم تظهر القدرة على تمديد صورة الخلفية إلى العرض الكامل لنافذة المتصفح باستخدام CSS إلا مع إصدار أحدث مواصفاتها - CSS3. لسوء الحظ ، حتى الآن عدد كبير من متصفحي الويب يستخدمون متصفحات قديمة لا تفهم مواصفات CSS3. لذلك ، عليك أن تختار - إما أن تستخدم حلاً أقل ملاءمة ، ولكنه متعدد المستعرضات ، أو تقنية عالية ، ولكن لجمهور محدود. دعنا نفكر في كلا الخيارين.
ضروري
المعرفة الأساسية بـ HTML و CSS
تعليمات
الخطوة 1
يعتمد الخيار الأول على المواصفات السابقة للغة CSS. تحتاج إلى إنشاء بنية تعليمات برمجية بلغة HTML تحتوي على طبقتين متداخلتين ، واحدة فوق الأخرى. يمكن تمديد الطبقات (div) إلى عرض الشاشة في مواصفات لغة وصف النمط المتتالي القديم. في الجزء السفلي من الطبقات ، تحتاج إلى وضع صورة الخلفية ، وفي الجزء العلوي ستضع كل محتويات الصفحة. قد يبدو هذا الهيكل في نص المستند كما يلي:
سيكون هذا هو محتوى الصفحة
ويجب وضع وصف الأنماط الخاصة بهذا الهيكل في جزء العنوان. على سبيل المثال ، هذا:
html ، جسم {
الهامش: 0 بكسل ؛
الارتفاع: 100٪؛
}
#معرفتي {
الموقف: مطلق.
العرض: 100٪؛
الارتفاع: 100٪؛
}
#الجسم {
الموقف: مطلق.
العرض: 100٪؛
الارتفاع: 100٪؛
مؤشر z: 2 ؛
}
هنا يتم تعيين الطبقات ذات خلفية المعرفات (هذه هي صورة الخلفية الخاصة بك) والجسم (هذه هي الطبقة لمحتوى الصفحة) على تحديد المواقع المطلق والعرض والارتفاع بنسبة 100٪. بالإضافة إلى ذلك ، يتم تخصيص رقم تسلسلي للفهرس z = 2. لطبقة المحتوى - وهي تحدد "عمق" الطبقات - كلما زاد حجمها ، كلما كانت هذه الطبقة أبعد عن "القاع". في حالتنا ، سيكون فوق طبقة الخلفية ، والتي تستخدم مؤشر z الافتراضي.
الخطوة 2
قد يبدو الرمز الكامل كما يلي:
html ، جسم {
الهامش: 0 بكسل ؛
الارتفاع: 100٪؛
}
#معرفتي {
الموقف: مطلق.
العرض: 100٪؛
الارتفاع: 100٪؛
}
#الجسم {
الموقف: مطلق.
العرض: 100٪؛
الارتفاع: 100٪؛
مؤشر z: 2 ؛
}
سيكون هذا هو محتوى الصفحة
لا تنس استبدال اسم ملف صورة الخلفية fon.png.
الخطوه 3
سيستخدم الخيار الثاني خاصية حجم الخلفية المقدمة في CSS3. في نفس الوقت ، أضف خصائص مشابهة لتعريفات الأنماط التي كانت تستخدمها متصفحات Mozilla Firefox و Google Chrome و Opera. قد تبدو كتلة وصف النمط في هذا الإصدار كما يلي:
لغة البرمجة {
الخلفية: url (fon.png) مركز مركز عدم تكرار ثابت ؛
-حجم خلفية -webkit: غطاء ؛
-موز-حجم الخلفية: غطاء ؛
- حجم الخلفية: غطاء ؛
حجم الخلفية: غطاء ؛
}
وهنا لا تنسى استبدال اسم ملف صورة الخلفية fon.png. وفي نص المستند نفسه ، لا يتطلب هذا الإصدار إنشاءات خاصة.
