תיעוד CSS עם דוגמאות להרצה: תמונת רקע

Q: איך מוסיפים תמונת רקע ב-CSS?

משתמשים ב-background-image: url("photo.jpg"); על האלמנט. הנתיב יחסי לקובץ ה-CSS (או לעמוד, במקרה של תכונת style או אלמנט ). תנו לאלמנט גודל, כי רקע אף פעם לא גורם לאלמנט ריק לגדול.

Q: איך גורמים לתמונת רקע לכסות את כל האלמנט?

משתמשים ב-background-size: cover; יחד עם background-position: center;. התמונה מוגדלת או מוקטנת עד שהיא ממלאת את התיבה לגמרי, תוך שמירה על הפרופורציות, והעודף נחתך.

Q: מה ההבדל בין cover ל-contain?

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

Q: איך מונעים מתמונת רקע לחזור על עצמה?

מוסיפים background-repeat: no-repeat;. כברירת מחדל תמונת רקע נפרסת כאריחים בשני הכיוונים כדי למלא את האלמנט.

Q: למה תמונת הרקע שלי לא מופיעה?

הסיבות הנפוצות הן נתיב שגוי ב-url() (הוא יחסי לקובץ ה-CSS), אלמנט בלי גובה כי אין בו תוכן, או קיצור background מאוחר יותר שאיפס את התמונה.

איך מוסיפים תמונת רקע

background-image מצייר תמונה מאחורי התוכן, ה-padding והגבול של האלמנט. כברירת מחדל היא מתחילה בפינה העליונה השמאלית של תיבת ה-padding, שומרת על הגודל הטבעי שלה וחוזרת על עצמה כדי למלא את התיבה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background image</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .dots {
      /* a 24x24 image: one blue dot */
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%232563eb'/%3E%3C/svg%3E");
      height: 120px;
      padding: 16px;
      border: 2px solid #111827;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <div class="dots">One 24px image, repeated to fill the box</div>
</body>
</html>

בפרויקט אמיתי ה-url() מצביע על קובץ: url("images/hero.jpg"). הנתיב יחסי לגיליון הסגנונות שמכיל אותו (או לעמוד, במקרה של אלמנט <style>). הדוגמאות בעמוד הזה משתמשות בתמונות SVG קטנות שנכתבו ישירות בקוד ככתובות data:, כדי שירוצו בכל מקום.

שני דברים שכדאי לדעת מההתחלה:

רקע לא נותן לאלמנט גודל. div ריק עם תמונת רקע הוא בגובה 0px. תנו לו תוכן, padding, height או aspect-ratio.
תמונת רקע היא קישוט. קוראי מסך מדלגים עליה ואין לה טקסט חלופי. תמונה שנושאת משמעות צריכה להיות באלמנט <img>.

background-size: cover, contain ואורכים

background-size משנה את גודל התמונה. שתי מילות המפתח שומרות על הפרופורציות שלה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>cover vs contain</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 12px; flex-wrap: wrap; }
    .box {
      --landscape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200'%3E%3Crect width='400' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='320' cy='50' r='24' fill='%23f59e0b'/%3E%3Cpath d='M0 200L120 70L220 200Z' fill='%2316a34a'/%3E%3Cpath d='M140 200L270 90L400 200Z' fill='%2315803d'/%3E%3C/svg%3E");
      width: 160px; height: 160px;
      background: var(--landscape) center / auto no-repeat, #e5e7eb;
      border: 2px solid #111827;
    }
    .cover { background-size: cover; }
    .contain { background-size: contain; }
    .stretch { background-size: 100% 100%; }
  </style>
</head>
<body>
  <div class="row">
    <div><div class="box"></div>auto (400x200, cropped)</div>
    <div><div class="box cover"></div>cover</div>
    <div><div class="box contain"></div>contain</div>
    <div><div class="box stretch"></div>100% 100% (distorted)</div>
  </div>
</body>
</html>

התמונה רחבה פי שניים מגובהה, וכל תיבה היא ריבוע.

ערך	תוצאה
`auto` (ברירת מחדל)	הגודל המקורי של התמונה
`cover`	מוגדלת עד שהתיבה מלאה לגמרי; העודף נחתך
`contain`	מוגדלת עד שכל התמונה נכנסת; נשארים פסים אפורים בשני צדדים
`200px`	ברוחב 200px, הגובה לפי הפרופורציה
`50% auto`	חצי מרוחב התיבה, הגובה לפי הפרופורציה
`100% 100%`	בדיוק בגודל התיבה; מעוותת את התמונה אם הפרופורציות שונות

cover הוא הבחירה הרגילה לבאנרים ראשיים ולכרטיסים. contain מתאים ללוגואים ולאיורים שאסור לחתוך אף פעם.

background-position ו-background-repeat

background-position ממקם את התמונה בתוך התיבה, עם מילות מפתח (top, center, bottom, left, right), אחוזים או אורכים. background-repeat שולט בפריסת האריחים. נסו כמה ערכים:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Position and repeat</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box {
      height: 140px; margin-top: 10px;
      border: 2px solid #111827;
      background-color: #f3f4f6;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%232563eb'/%3E%3C/svg%3E");
      background-size: 48px;
    }
    label { display: block; margin-top: 6px; }
  </style>
</head>
<body>
  <label>background-position: <input id="pos" value="center" size="18"></label>
  <label>background-repeat: <input id="rep" value="no-repeat" size="18"></label>
  <div id="box"></div>
  <script>
    const box = document.getElementById('box');
    const pos = document.getElementById('pos');
    const rep = document.getElementById('rep');
    const show = () => {
      box.style.backgroundPosition = pos.value;
      box.style.backgroundRepeat = rep.value;
    };
    pos.addEventListener('input', show);
    rep.addEventListener('input', show);
    show();
  </script>
</body>
</html>

נסו את המיקומים top right, bottom 10px right 20px ו-25% 75%, ואת ערכי החזרה repeat-x, repeat-y, space (אריחים עם רווחים כך שאף אחד לא נחתך) ו-round (אריחים שגודלם משתנה כך שייכנס מספר שלם מהם).

שכבות: כמה רקעים וטקסט מעל תמונה

background-image מקבל רשימה מופרדת בפסיקים. השכבה הראשונה מצוירת למעלה. השימוש הנפוץ הוא מעבר צבע חצי שקוף מעל תמונה, כדי שטקסט לבן יישאר קריא:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Overlay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .hero {
      --landscape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='200' viewBox='0 0 400 200'%3E%3Crect width='400' height='200' fill='%23bfdbfe'/%3E%3Ccircle cx='320' cy='50' r='24' fill='%23f59e0b'/%3E%3Cpath d='M0 200L120 70L220 200Z' fill='%2316a34a'/%3E%3Cpath d='M140 200L270 90L400 200Z' fill='%2315803d'/%3E%3C/svg%3E");
      background-image:
        linear-gradient(rgb(17 24 39 / 10%), rgb(17 24 39 / 75%)),
        var(--landscape);
      background-size: cover;
      background-position: center;
      aspect-ratio: 16 / 7;
      display: flex; align-items: end;
      padding: 20px; box-sizing: border-box;
      color: white;
    }
    h1 { margin: 0; font-size: 32px; }
  </style>
</head>
<body>
  <div class="hero" id="hero"><h1>Readable over an image</h1></div>
</body>
</html>

aspect-ratio נותן לתיבה הריקה גובה, ו-background-size: cover חל על שתי השכבות. למתכונים נוספים של מעברי צבע, ראו CSS gradients.

הקיצור background

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

.hero {
  background: url("hero.jpg") center / cover no-repeat, #1f2937;
}
/* the same as */
.hero {
  background-image: url("hero.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #1f2937;
}

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

מאפייני רקע נוספים

מאפיין	מה הוא עושה
`background-attachment: fixed`	התמונה נשארת במקומה בזמן שהעמוד נגלל (לא נתמך ב-Safari של iOS)
`background-origin`	אם המיקום מתחיל מקצה הגבול, ה-padding או התוכן
`background-clip`	איפה הרקע נצבע, כולל `text` כדי למלא אותיות
`background-blend-mode`	ממזג שכבות זו בזו, כמו `multiply`

טעויות נפוצות

נתיב שגוי. url() בגיליון סגנונות יחסי לקובץ ה-CSS, לא לעמוד ה-HTML.
אלמנט ריק. אין לו גובה, אז לתמונה אין איפה להופיע.
שכחה של no-repeat עם contain או עם תמונה קטנה: היא נפרסת כאריחים.
מתיחה עם 100% 100% כשהתכוונתם ל-cover.
תמונות חשובות כרקעים. השתמשו ב-<img> עם טקסט חלופי לתוכן; רקעים בלתי נראים לקוראי מסך.
חסרים מירכאות סביב כתובת data: שמכילה רווחים או מירכאות. כתבו תמיד url("...").

שאלות נפוצות

איך מוסיפים תמונת רקע ב-CSS?

משתמשים ב-background-image: url("photo.jpg"); על האלמנט. הנתיב יחסי לקובץ ה-CSS (או לעמוד, במקרה של תכונת style או אלמנט <style>). תנו לאלמנט גודל, כי רקע אף פעם לא גורם לאלמנט ריק לגדול.

איך גורמים לתמונת רקע לכסות את כל האלמנט?

משתמשים ב-background-size: cover; יחד עם background-position: center;. התמונה מוגדלת או מוקטנת עד שהיא ממלאת את התיבה לגמרי, תוך שמירה על הפרופורציות, והעודף נחתך.

מה ההבדל בין cover ל-contain?

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

איך מונעים מתמונת רקע לחזור על עצמה?

מוסיפים background-repeat: no-repeat;. כברירת מחדל תמונת רקע נפרסת כאריחים בשני הכיוונים כדי למלא את האלמנט.

למה תמונת הרקע שלי לא מופיעה?

הסיבות הנפוצות הן נתיב שגוי ב-url() (הוא יחסי לקובץ ה-CSS), אלמנט בלי גובה כי אין בו תוכן, או קיצור background מאוחר יותר שאיפס את התמונה.

מושגים קשורים