הגדרת הסצינה אותה אני רוצה לבנות ב- HTML5 :
האדם יושב על הסלע ומתבונן במדורה, ברקע נשמע כל הזמן רחש האש, ואור מרצד על פניו ועל קירות המערה.
כאשר המשתמש לוחץ באופן קבוע על המדורה האש תגבר, כך גם עצמת האור המרצד ורחש המדורה.
כאשר המשתמש יפסיק ללחוץ על המדורה - חזרה למצב ההתחלתי.
תמונת הרקע צריכה לכסות את כל המסך ללא השארת פסים ריקים בשוליים, ללא מתיחה ועיוות, ושהצגתה תשתנה באופן דינאמי בהתאם לצורת הצפייה במסך - אופקי או אנכי.
יצרתי תיקייה חדשה לכל התמונות והאלמנטים הגרפיים, שם מיקמתי את ציור הרקע.
את דף ה- index.html (שבתחילה שמו היה default.html) השארתי לגמרי ריק חוץ מההכרזות ב- <head> (תמונה 1).
לאחר חיפוש באינטרנט נעזרתי בעיקר באתר הזה.
פירוט הרכיבים הנמצאים בקובץ ה- CSS כפי שניתן לראות בתמונה 2: - ;('background: url('../Images/A9.jpg - הכתובת היחסית לקובץ תמונת הרקע.
- ;background-position-x: center - אם רוחב החלון קטן מרוחב הרקע, במקרה למשל של מסך אנכי צר, אז תמונת הרקע תנדוד שמאלה כדי שמרכז הרקע יהיה במרכז החלון. כנ"ל לגבי ציר ה- y.
- ;min-height: 100% - הגובה הקטן ביותר של הרקע יהיה כגובה החלון. זה בא כדי לוודא שהרקע יכסה את כל המסך לפחות, במקרה שיכסה יותר אז הוא יחתך מלמעלה ומלמטה.
- ;background-size: cover - הרקע יכסה את כל המסך, בדיוק מה שאנחנו צריכים.
לגבי הפרמטר של החזרה, כלומר שתמונת הרקע תופיע פעם אחת בלבד, אני לא בטוח שזה נחוץ אבל הומלץ כן לכלול אותו באתר בו נעזרתי.
שימו לב שבתמונה 2 המרכז של תמונת הרקע, גם האופקי וגם האנכי (מסומן בחץ אדום), תמיד מופיע בחלון ללא קשר ליחס הגובה-רוחב שלו. ומזה ניתן להסיק גם על מסך של טלפון חכם.