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

<body>
   <h1>Background image attributes</h1>
   <div id="mainDiv">
      Here is some initial text, followed by empty lines
      <br><br><br><br><br>
      <br><br><br><br><br>
      <br><br><br><br><br>
      <a href="https://www.pexels.com/photo/beautiful-view-of-moraine-lake-2662116/">Image source</a>
   </div>
</body>

שימו לב ששמתי הרבה שורות ריקות בתוך ה- div כדי שנוכל לראות את תמונת הרקע בקלות.
כעת, נגדיר ב- CSS תמונה כרקע של ה- div:

#mainDiv
{
   background: url("./landscape_small.png");
}

והתוצאה שמתקבלת:

 

 

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

ה- property של background-repeat בתמונת רקע

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

  • repeat-x אשר יגרום לשכפול התמונה בציר X בלבד
  • repeat-y אשר יגרום לשכפול התמונה בציר Y בלבד
  • no-repeat אשר ימנע את שכפול התמונה, כך שהיא תופיע פעם אחת בלבד

בואו, למשל, נשנה את ה- CSS כך שישתמש באפשרות repeat-x:

#mainDiv
{
   background: url("./landscape_small.png");
   background-repeat: repeat-x; 
}

והתוצאה:

 

 

כלומר התמונה שוכפלה כך שתכסה את ה- div לאורך ציר X בלבד, אך היא לא שוכפלה לאורך ציר Y.

אם ניתן ל- background-repeat את הערך no-repeat:

#mainDiv
{
   background: url("./landscape_small.png");
   background-repeat: no-repeat; 
}

מקבלים:

 

 

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

קביעת הגודל של תמונת רקע עם background-size

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

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

#mainDiv
{
   background: url("./landscape_small.png");
   background-repeat: no-repeat;
   background-size: 800px 150px;
}

והתוצאה:

 

 

אנו רואים שהמספר הראשון קבע את מספר הפיקסלים שהתמונה תתפוס בציר X והמספר השני קבע את מספר הפיקסלים שהתמונה תתפוס בציר Y. אבל שימו לב שהתמונה התעוותה! כלומר ה- aspect ratio שלה לא נשמר והיחס בין הרוחב לגובה השתנה.

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

#mainDiv
{
   background: url("./landscape_small.png");
   background-repeat: no-repeat;
   background-size: 800px;
}

 

 

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

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

#mainDiv
{
   background: url("./landscape_small.png");
   background-repeat: no-repeat;
   background-size: 100%;
}

 

 

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

הערכים cover ו- contain של background-size

יש עוד שתי אפשרויות להגדרת גודלה של תמונת הרקע.

אפשר להשתמש בערך cover. זה יבטיח שתמונת הרקע תכסה לחלוטין את האלמנט שלה, אבל היא יכולה להיחתך. זה נראה כך ב- CSS:

#mainDiv
{
   background: url("./landscape_small.png");
   background-repeat: no-repeat;
   background-size: cover;
}

התוצאה:

 

 

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

אם משתמשים בערך contain, לעומת זאת, מקבלים תמונה שנמתחת ככל האפשר - אך בלי לחתוך אותה.

#mainDiv
{
   background: url("./landscape_small.png");
   background-repeat: no-repeat;
   background-size: contain;
}

 

 

למעשה קיבלנו תוצאה זהה למה שקיבלנו כאשר הגדרנו רוחב של 100%. אבל ייתכנו מצבים אחרים שבהם התמונה גבוהה וצרה, ואז הציר הקובע יהיה ציר ה- Y, כלומר התמונה תימתח כך שתכסה את האלמנט בציר ה- Y אבל לא תכסה אותו בציר ה- X.