توانایی کشیدن تصویر پس زمینه به تمام عرض پنجره مرورگر با استفاده از CSS فقط با انتشار آخرین مشخصات آن - CSS3 ظاهر می شود. متأسفانه ، تاکنون تعداد زیادی از مرورگرهای وب از مرورگرهای اولیه استفاده می کنند که مشخصات CSS3 را درک نمی کنند. بنابراین ، شما باید یک انتخاب کنید - یا از یک راه حل نه چندان راحت ، اما از نوع مرورگر متقابل ، یا از فناوری پیشرفته ، اما برای مخاطبان محدود استفاده کنید. بیایید هر دو گزینه را در نظر بگیریم.
ضروری است
دانش پایه HTML و CSS
دستورالعمل ها
مرحله 1
اولین گزینه بر اساس مشخصات قبلی زبان CSS است. شما باید یک ساختار کد HTML ایجاد کنید که دارای دو لایه همپوشانی باشد ، یکی در بالای لایه دیگر. لایه ها (div) را می توان به عرض صفحه در مشخصات زبان توصیف سبک آبشار قدیمی کشید. در پایین لایه ها باید تصویر پس زمینه را قرار دهید ، و در قسمت بالا تمام محتوای صفحه قرار می گیرد. چنین ساختاری در متن سند ممکن است به این شکل باشد:
این محتوای صفحه خواهد بود
و شرح سبک ها برای این ساختار باید در قسمت عنوان قرار گیرد. به عنوان مثال ، این:
html ، بدن {
حاشیه: 0px؛
قد: 100٪
}
#زمینه {
موقعیت: مطلق؛
عرض: 100٪
قد: 100٪
}
# بدن {
موقعیت: مطلق؛
عرض: 100٪
قد: 100٪
z-index: 2؛
}
در اینجا لایه های دارای پس زمینه ID (این تصویر پس زمینه شماست) و متن (این لایه برای محتوای صفحه است) روی موقعیت مطلق و 100٪ عرض و ارتفاع تنظیم می شوند. علاوه بر این ، به لایه محتوا یک شماره سریال z-index = 2 اختصاص داده شده است. این "عمق" لایه ها را تعیین می کند - هرچه بزرگتر باشد ، این لایه از "پایین" فاصله دارد. در مورد ما ، بالای لایه پس زمینه قرار دارد که از z-index پیش فرض استفاده می کند.
گام 2
کد کامل ممکن است به این شکل باشد:
html ، بدن {
حاشیه: 0px؛
قد: 100٪
}
#زمینه {
موقعیت: مطلق؛
عرض: 100٪
قد: 100٪
}
# بدن {
موقعیت: مطلق؛
عرض: 100٪
قد: 100٪
z-index: 2؛
}
این محتوای صفحه خواهد بود
فراموش نکنید که نام پرونده تصویر پس زمینه را جایگزین کنید fon.png.
مرحله 3
گزینه دوم از ویژگی پس زمینه اندازه گیری شده در CSS3 استفاده می کند. همزمان ، خصوصیات مشابهی را به تعاریف سبک اضافه کنید که قبلاً توسط مرورگرهای Mozilla Firefox ، Google Chrome و Opera استفاده می شد. بلوک توصیف سبک در این نسخه ممکن است به این شکل باشد:
html {
زمینه: url (fon.png) مرکز بدون تکرار ثابت شد؛
-webkit-background-size: cover؛
-moz-background-size: cover؛
-o-background-size: جلد؛
background-size: جلد؛
}
و در اینجا فراموش نکنید که نام پرونده تصویر پس زمینه را جایگزین کنید fon.png. و در متن خود سند ، هیچ ساخت خاصی در این نسخه لازم نیست.
