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

תמונה כרקע

שלב ראשון אסביר איך מותחים תמונה ומקבעים אותה כרקע. שימו לב כי ניתן להשתמש ב CSS3 אך עדיין זה לא נתמך בכל בדפדפנים.

מיד לאחר תגית BODY שמתי DIV ובתוך הדיב את התמונה הרצויה

זה ה CSS של ה-div

הצג/הסתר קוד css

הצג מקור
 
 
#background {
 
 
 
    height: 100%;
 
    left: 0;
 
    position: fixed;
 
    top: 0;
 
    width: 100%;
 
   z-index: -1;
 
}
 
 
 
 
 
 
 

הCSS של התמונה

הצג/הסתר קוד css

הצג מקור
 
 
 
.stretch {
 
 
 
    height: 100%;
 
    width: 100%;
 
 
 
 
 
}
 
 
 
 
 

זה נותן לנו תמונת רקע שנמתחת על גבי הצג בהתאם

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

כעת לחלק השני והיותר מעניין.

איך לקבוע שבדפים שונים יהיו תמונות שונות

לשם כך השתמשתי בתפריט, וההסבר הוא שאם דף הבית מוגדר כ ID=100 אז קבעתי שבID=100 תופיע תמונה מסוימת וכך הלאה.

קראתי לאובייקט של התפריט כך

הצג/הסתר קוד php

הצג מקור
 
 
 
$menu = & JSite::getMenu();
 
 
 

והקוד נראה כך:

הצג/הסתר קוד php

הצג מקור
 
 
 
<?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 }?>
 
 
 

ניתן לממש את זה בכמה דרכים אך לאתר הספציפי החלטתי לבחור בדרך הזאת.

את התוצאה אפשר לראות כאן.

עליך להירשם כדי להוסיף תגובות