יצירת ספר אינטראקטיבי - חלק 23 - פריסת תמונת הרקע


יריב 19/02/2013 (נערך לאחרונה ב-08/05/2013)


 

 

הגדרת הסצינה אותה אני רוצה לבנות ב- HTML5 :
האדם יושב על הסלע ומתבונן במדורה, ברקע נשמע כל הזמן רחש האש, ואור מרצד על פניו ועל קירות המערה.
כאשר המשתמש לוחץ באופן קבוע על המדורה האש תגבר, כך גם עצמת האור המרצד ורחש המדורה.
כאשר המשתמש יפסיק ללחוץ על המדורה - חזרה למצב ההתחלתי.

תמונת הרקע צריכה לכסות את כל המסך ללא השארת פסים ריקים בשוליים, ללא מתיחה ועיוות, ושהצגתה תשתנה באופן דינאמי בהתאם לצורת הצפייה במסך - אופקי או אנכי.

יצרתי תיקייה חדשה לכל התמונות והאלמנטים הגרפיים, שם מיקמתי את ציור הרקע.
את דף ה- index.html (שבתחילה שמו היה default.html) השארתי לגמרי ריק חוץ מההכרזות ב- <head> (תמונה 1).
כיוון שרקע הוא חלק מהגדרות העיצוב הוא יוגדר בקובץ ה- CSS, תחת תגית ה- <html>. ניתן היה לחשוב שצריך לקבוע את הרקע תחת תגית ה- <body> אך התקן של HTML5 קובע שתג זה לא יתמוך בהגדרות של עיצוב ופריסה אלא רק תוכן.

לאחר חיפוש באינטרנט נעזרתי בעיקר באתר הזה.

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

שימו לב שבתמונה 2 המרכז של תמונת הרקע, גם האופקי וגם האנכי (מסומן בחץ אדום), תמיד מופיע בחלון ללא קשר ליחס הגובה-רוחב שלו. ומזה ניתן להסיק גם על מסך של טלפון חכם.




<-- חלק 22                                                                                                                                                           חלק 24 -->

 

         






תגובות

 



הגב/הגיבי לרשומה:

שם
 

תוכן התגובה                                                 


  Skip Navigation Links







אלא אם צויין אחרת בגוף המאמר התוכן חופשי להפצה תחת רשיון ייחוס 3.0 לא מותאם של Creative Commons.

Created by yarriva.com