היכולת למתוח את תמונת הרקע לכל רוחב חלון הדפדפן באמצעות CSS הופיעה רק עם שחרור המפרט האחרון שלה - CSS3. למרבה הצער, עד כה מספר רב של גולשי רשת משתמשים בדפדפנים מוקדמים שאינם מבינים את המפרט CSS3. לכן, עליכם לבחור - או להשתמש בפתרון פחות נוח, אך חוצה דפדפנים, או בהיי-טק, אך עבור קהל מוגבל. בואו ניקח בחשבון את שתי האפשרויות.
נחוץ
ידע בסיסי ב- HTML ו- CSS
הוראות
שלב 1
האפשרות הראשונה מבוססת על מפרט קודם של שפת CSS. עליך ליצור מבנה קוד HTML המכיל שתי שכבות חופפות, אחת מעל השנייה. ניתן למתוח שכבות (div) לרוחב המסך במפרט השפה הישן של תיאור הסגנון המדורג. בתחתית השכבות אתה צריך למקם את תמונת הרקע, ובחלקה העליון יניח את כל תוכן הדף. מבנה כזה בגוף המסמך עשוי להיראות כך:
זה יהיה תוכן הדף
ואת תיאור הסגנונות למבנה זה יש למקם בחלק הכותרת. לדוגמה, זה:
html, body {
שוליים: 0 פיקסלים;
גובה: 100%;
}
#רקע כללי {
עמדה: מוחלט;
רוחב: 100%;
גובה: 100%;
}
# גוף {
עמדה: מוחלט;
רוחב: 100%;
גובה: 100%;
z-index: 2;
}
כאן השכבות עם רקע מזהים (זו תמונת הרקע שלך) וגוף (זו השכבה לתוכן העמוד) מוגדרים למיקום מוחלט ולרוחב וגובה של 100%. בנוסף, לשכבת התוכן מוקצה מספר סידורי z-index = 2. היא קובעת את "עומק" השכבות - ככל שהיא גדולה יותר, כך רחוק יותר "מלמטה" שכבה זו ממוקמת. במקרה שלנו, הוא יהיה מעל שכבת הרקע, המשתמשת באינדקס z המוגדר כברירת מחדל.
שלב 2
הקוד השלם עשוי להיראות כך:
html, body {
שוליים: 0 פיקסלים;
גובה: 100%;
}
#רקע כללי {
עמדה: מוחלט;
רוחב: 100%;
גובה: 100%;
}
# גוף {
עמדה: מוחלט;
רוחב: 100%;
גובה: 100%;
z-index: 2;
}
זה יהיה תוכן הדף
אל תשכח להחליף את שם קובץ תמונת הרקע fon.png.
שלב 3
האפשרות השנייה תשתמש במאפיין בגודל הרקע שהוצג ב- CSS3. במקביל, הוסף מאפיינים דומים להגדרות הסגנון ששימשו בעבר את הדפדפנים Mozilla Firefox, Google Chrome ו- Opera. גוש תיאור הסגנון בגרסה זו עשוי להיראות כך:
html {
רקע: url (fon.png) מרכז מרכז לא חוזר קבוע;
-וובקיט-רקע-גודל: כריכה;
-מוז-רקע-גודל: כריכה;
-או-רקע-גודל: כריכה;
גודל רקע: כריכה;
}
וכאן אל תשכחו להחליף את שם קובץ תמונת הרקע fon.png. ובגוף המסמך עצמו, אין צורך בבנייה מיוחדת בגרסה זו.
