קביעת ממדי תמונת רקע ב - CSS3

אחת התכונות היותר חדשות ב - CSS3 היא התכונה background-size. למרות היותה תכונה יחסית חדשה, נכון לזמן כתיבת מדריך זה, היא כבר הוטמעה על ידי Firefox 4.0, Explorer 9, Opera 10, Safari 4.1, Chrom.

כפי שניתן להבין משמה תכונה זו מאפשרת למתכנת לשלוט בממדיה של תמונת רקע לאלמנטים ב - HTML שיכולה להיות להם תמונת רקע.

הצורה הכללית לשימוש ב - background-size היא:

Element { background-size: ערך; }

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

להלן דוגמאות קוד שונות הממחישות את הערכים השונים שהתכונה background-size יכולה לקבל:

background-size: contain;
background-size: cover;
background-size: auto 100px;
background-size: 100px;
background-size: 100px 100px;
background-size: 100px 100px, 200px 200px;
background-size: 55% 35%;

 

דוגמה לשימוש בתכונה background-size

#element {background-size: 220px 170px; }

נמחיש את משמעות הקוד שלמעלה בעזרת האיור הבא:

background size demo

כפי שביכולתכם לראות תמונת הרקע שלנו אינה ממלאת את כל שטח האלמנט אלא רק חלק מתוכו עפ"י הגודל שנגדיר עבורה. אילולא הגדרנו לתמונה ערכים באמצעות התכונה background-size היה גודלה "האמיתי" של התמונה במקרה זה שונה.

שימוש ב - "contain" או "cover"  כערכים לתכונה background-size

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

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


 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש