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

Q: איך משנים את צבע הרקע ב-HTML?

משתמשים במאפיין ה-CSS background-color. לעמוד כולו: body { background-color: #f3f4f6; }. לאלמנט אחד: .

Q: האם bgcolor עדיין תקין ב-HTML?

לא. התכונה bgcolor על , ו- מיושנת ב-HTML5. דפדפנים עדיין מציירים אותה בשביל עמודים ישנים, אבל הדרך הנכונה היא background-color ב-CSS.

Q: איך הופכים צבע רקע לשקוף?

משתמשים בצבע עם ערוץ אלפא, למשל background-color: rgb(37 99 235 / 20%);. בניגוד ל-opacity, כך הטקסט שבפנים נשאר גלוי לגמרי.

Q: מה ההבדל בין background ל-background-color?

background-color קובע רק את הצבע. background הוא קיצור לכל מאפייני הרקע (צבע, תמונה, מיקום, גודל, חזרה, attachment, origin ו-clip), ולכן background: red; גם מאפס כל תמונת רקע ל-none.

Q: למה צבע הרקע של body ממלא את כל החלון?

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

CSS Background Color: צבע רקע לעמודים, לאלמנטים ושקיפות

background-color ממלא את התיבה של אלמנט בצבע. למדו איך לקבוע צבע רקע לעמוד שלם, ל-div, לשורת טבלה או למילה אחת, איך עובדת שקיפות, למה bgcolor מיושן, ובמה background-color שונה מהקיצור background.

בדף הזה יש עורכים שאפשר להריץ - לערוך, להריץ ולראות את הפלט מיד.

מאת Kevin Spektor, מייסד שותף ו-CTO

פורסם ב-Sep 24, 2026

איך קובעים צבע רקע

background-color ממלא את התיבה של אלמנט בצבע, כולל ה-padding שלו והשטח שמתחת לגבול שלו. הוא מקבל כל צבע CSS.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Background color</title>
  <style>
    body { font-family: system-ui, sans-serif; background-color: #f3f4f6; }
    .card { background-color: #ffffff; padding: 16px; border-radius: 8px; margin-bottom: 12px; }
    .notice { background-color: #fef3c7; padding: 12px 16px; }
    mark { background-color: #bbf7d0; }
  </style>
</head>
<body>
  <div class="card">A white card on a light gray page.</div>
  <div class="notice">An amber notice.</div>
  <p>A <mark>highlighted phrase</mark> inside a sentence.</p>
  <p><span style="background-color: #2563eb; color: white; padding: 2px 6px;">inline style</span></p>
</body>
</html>

צבע העמוד נקבע על body, הכרטיס וההודעה על ה-divs שלהם, וההדגשה על אלמנט inline. אלמנטים מסוג inline מקבלים רקע רק מאחורי הטקסט שלהם, שורה אחר שורה.

צבע הרקע של העמוד כולו

שימו את background-color על body. אם לאלמנט <html> אין רקע משלו, הדפדפן צובע את הרקע של body על כל החלון, גם במקום שבו התוכן של body נגמר:

body {
  background-color: #111827;
  color: #f9fafb; /* change the text color too, for contrast */
}

הדרך הישנה ב-HTML הייתה <body bgcolor="black">. התכונה bgcolor מיושנת בכל אלמנט, אז השתמשו ב-CSS במקומה. דפדפנים עדיין מכבדים אותה בשביל עמודים ישנים, ולכן ייתכן שהיא נראית כאילו היא עובדת.

רקעים שקופים

כל אלמנט מתחיל עם background-color: transparent, כך שרואים דרכו את ההורה שמאחוריו. כדי לצבוע תיבה בגוון ועדיין לראות דרכה, השתמשו בצבע עם ערוץ אלפא:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Transparent background</title>
  <style>
    body {
      font-family: system-ui, sans-serif; font-weight: 600; padding: 12px;
      background: repeating-linear-gradient(45deg, #bfdbfe 0 12px, #ffffff 12px 24px);
    }
    .box { padding: 16px; margin-bottom: 10px; color: #111827; }
    .none { background-color: transparent; border: 2px dashed #111827; }
    .tint { background-color: rgb(245 158 11 / 50%); }
    .solid { background-color: rgb(245 158 11); }
  </style>
</head>
<body>
  <div class="box none">transparent (the default)</div>
  <div class="box tint" id="tint">rgb(245 158 11 / 50%)</div>
  <div class="box solid">rgb(245 158 11)</div>
</body>
</html>

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

איפה הצבע נצבע

כברירת מחדל הרקע מגיע עד הקצה החיצוני של הגבול (כך שהוא נראה דרך גבול מקווקו או חצי שקוף). background-clip משנה את זה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>background-clip</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .box {
      display: inline-block; margin: 6px; padding: 16px;
      border: 8px dashed #111827;
      background-color: #f59e0b;
    }
    .padding { background-clip: padding-box; }
    .content { background-clip: content-box; }
  </style>
</head>
<body>
  <div class="box">border-box</div>
  <div class="box padding">padding-box</div>
  <div class="box content">content-box</div>
</body>
</html>

בתיבה הראשונה הכתום נראה בין הקווקווים. בשנייה הוא נעצר בקצה הפנימי של הגבול, ובשלישית רק אזור התוכן צבוע. ה-margin אף פעם לא נצבע: הוא תמיד שקוף.

שורות טבלה מפוספסות

רקע על כל שורה שנייה עוזר לסרוק טבלאות רחבות בקלות:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Striped rows</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    table { border-collapse: collapse; width: 100%; }
    th, td { padding: 8px 12px; text-align: start; }
    thead { background-color: #1f2937; color: white; }
    tbody tr:nth-child(even) { background-color: #f3f4f6; }
    tbody tr:hover { background-color: #dbeafe; }
  </style>
</head>
<body>
  <table>
    <thead><tr><th>Name</th><th>Role</th></tr></thead>
    <tbody>
      <tr><td>Ada</td><td>Engineer</td></tr>
      <tr><td>Grace</td><td>Admiral</td></tr>
      <tr><td>Alan</td><td>Mathematician</td></tr>
      <tr><td>Katherine</td><td>Physicist</td></tr>
    </tbody>
  </table>
</body>
</html>

background-color מול הקיצור background

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

.hero {
  background-image: linear-gradient(#2563eb, #1e40af);
  background: #111827;          /* also resets background-image to none */
}

.hero {
  background-image: linear-gradient(#2563eb, #1e40af);
  background-color: #111827;    /* only the color; the gradient stays */
}

השתמשו ב-background-color כשאתם מתכוונים רק לצבע. השתמשו ב-background כשאתם קובעים את הרקע כולו במקום אחד, לרוב צבע ותמונה; ראו background-image.

נגישות: התאימו אותו לצבע הטקסט

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

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

שימוש ב-bgcolor. הוא מיושן. השתמשו ב-background-color.
שימוש ב-opacity לרקע שקוף. הוא מעמעם גם את התוכן. השתמשו בצבע אלפא.
קיצור background אחרי background-image. הוא מאפס את התמונה. כתבו background-color במקום.
ציפייה שה-margin יציג את הצבע. ה-margin נמצא מחוץ לרקע. השתמשו ב-padding לרווח צבוע.
רקע כהה עם טקסט ברירת מחדל. הגדירו גם color בהיר.

שאלות נפוצות

איך משנים את צבע הרקע ב-HTML?

משתמשים במאפיין ה-CSS background-color. לעמוד כולו: body { background-color: #f3f4f6; }. לאלמנט אחד: <div style="background-color: #fef3c7;">.

האם bgcolor עדיין תקין ב-HTML?

לא. התכונה bgcolor על <body>, <table> ו-<td> מיושנת ב-HTML5. דפדפנים עדיין מציירים אותה בשביל עמודים ישנים, אבל הדרך הנכונה היא background-color ב-CSS.

איך הופכים צבע רקע לשקוף?

משתמשים בצבע עם ערוץ אלפא, למשל background-color: rgb(37 99 235 / 20%);. בניגוד ל-opacity, כך הטקסט שבפנים נשאר גלוי לגמרי.

מה ההבדל בין background ל-background-color?

background-color קובע רק את הצבע. background הוא קיצור לכל מאפייני הרקע (צבע, תמונה, מיקום, גודל, חזרה, attachment, origin ו-clip), ולכן background: red; גם מאפס כל תמונת רקע ל-none.

למה צבע הרקע של body ממלא את כל החלון?

כשלאלמנט <html> אין רקע משלו, הדפדפן צובע את הרקע של body על כל הקנבס, גם מעבר לתיבה של body. תנו ל-html רקע אם אתם צריכים שהשניים יהיו שונים.

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