Get Adobe Flash player
דף הבית גרפיקה באינטרנט תמונות רקע

האתר של רפאלי - גרפיקה, HTML

בפרק הקודם דנו על הוספת תמונה לדף HTML. שם, התמונה הוספה כאלמנט המשתלב עם הטקסטים. בפרק זה נדון בתמונה שנשארת ברקע ואינה מושפעת מתוכן הדף, שאפשר לכתוב עליה, להעמיד עליה תמונות אחרות, גרפיקה ועוד.

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

תמונת רקע יכולה להיות בכל מקטע מתוחם. היא יכולה להיות כרקע של ה body, ואז היא תהיה ברקע הדף כולו, היא יכולה להיות כרקע של טבלה, כרקע של תא בודד בטבלה, או כרקע במקטע מוגדר אחר (למשל, ראה בקורס CSS - שימוש בתג div ליצירת "קופסאות")

התכונה להגדרת תמונת הרקע היא background="".

הערה חשובה:

התכונה bckground עומדת להתבטל, ובמקומה צריך להשתמש בהוראות ה CSS המקבילות, הכוללת שליטה רבה מאוד על תמונת הרקע.

ההסבר בפרק זה חשוב אך מיועד להסברת העיקרון ותו לא!

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

בדוגמאות הבאות נשתמש בתמונות שונות לריצוף מקטע גדול יותר:

תמונה א'
תמונה ב' עם gif מונפש עליו
 
תמונה ג'
תמונה ד'
gif מונפש על הרקע טקסט הנמצא על תמונת הרקע

ביטול הריצוף:

הוראות ה CSS מאפשרות השמת תמונת רקע אך לשלוט בתכוננת הריצוף: ללא ריצוף, ריצוף אופקי או אנכי בלבד,

כאשר מבטלים את הריצוף, הוראות ה CSS מאפשרות שליטה על מיקום התמונה בדף, ואף על קביעתה במקום כשהטקסט מתגלגל מעליה.

קביעת התמונה במקומה:

התכונה bgproperties="fixed", גורמת לנעילת התמונה במקומה. בעת שמגלגלים את הדף מעלה ומטה או ימינה ושמאלה, התמונה נשארת במקומה, ורק הטקסט והתמונות נעים על המסך - ובעצם מתגלגלים מעל תמונת הרקע.

חשוב: תכונה זו עובדת רק באינטרנט אקספלורר, ואינה שייכת לתקן HTML. יכולת זאת ניתן להשיג באמצעות הוראות CSS.

 

 

אל השיעור הקודם