בתבנית האחרונה שבניתי, הייתי צריך לקבוע כמעט לכל דף באתר תמונת רקע נמתחת על הצג ובכל דף התמונה תהיה שונה. ישנם כמה שיטות לבצע את זה. אציג לפניכם את השיטה שבחרתי.
תמונה כרקע
שלב ראשון אסביר איך מותחים תמונה ומקבעים אותה כרקע. שימו לב כי ניתן להשתמש ב CSS3 אך עדיין זה לא נתמך בכל בדפדפנים.
מיד לאחר תגית BODY שמתי DIV ובתוך הדיב את התמונה הרצויה
זה ה CSS של ה-div
#background {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: -1;
}
הCSS של התמונה
.stretch {
height: 100%;
width: 100%;
}
זה נותן לנו תמונת רקע שנמתחת על גבי הצג בהתאם
לאחר מכן המשכתי לבנות את התבנית לפי מה שרצוי מכיון שיש ל-div את המאפיין ZINDEX נמוך הוא יופיע כרקע ולא יתפוס מקום.
כעת לחלק השני והיותר מעניין.
איך לקבוע שבדפים שונים יהיו תמונות שונות
לשם כך השתמשתי בתפריט, וההסבר הוא שאם דף הבית מוגדר כ ID=100 אז קבעתי שבID=100 תופיע תמונה מסוימת וכך הלאה.
קראתי לאובייקט של התפריט כך
$menu = & JSite::getMenu();
והקוד נראה כך:
<?php if($menu->getActive()->id == 101){ ?>
<img src="templates/sigaltemp/images/bg/homenew.jpg" class="stretch" id="bg" alt="" />
<?php } elseif ($menu->getActive()->id == 144){?>
<img src="templates/sigaltemp/images/bg/about.jpg" class="stretch" alt="" />
<?php } else{?>
<img src="templates/sigaltemp/images/bg/homenew.jpg" class="stretch" alt="" />
<?php }?>
ניתן לממש את זה בכמה דרכים אך לאתר הספציפי החלטתי לבחור בדרך הזאת.
את התוצאה אפשר לראות כאן.
