רקעים

הפודקאסט של CSS - 053: רקע

רקעים

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

שכבות הרקע הן הרחוקות ביותר מהמשתמש, ומרונדרות מאחורי תוכן של תיבה החל מאזור padding-box שלה. כך שכבת הרקע לא תהיה חופפת כלל לגבולות.

צבע הרקע

תמיכה בדפדפן

• 1
• 12
• 1
• 1

מקור

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

תמונות רקע

תמיכה בדפדפן

• 1
• 12
• 1
• 1

מקור

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

• כתובת URL של תמונה או URI של נתונים באמצעות פונקציית CSS url.
• תמונה שנוצרה באופן דינמי באמצעות פונקציית CSS הדרגתית.

הגדרה של תמונת רקע באמצעות הפונקציה url של CSS

רקעים הדרגתיים של CSS

קיימות מספר פונקציות CSS הדרגתיות כדי לאפשר לך ליצור תמונת רקע, כאשר אתה עובר בשני צבעים או יותר.

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

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

תמונות רקע חוזרות

תמיכה בדפדפן

• 1
• 12
• 1
• 1

מקור

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

אפשר לשנות זאת באמצעות המאפיין background-repeat עם אחד מהערכים הבאים:

• repeat: התמונה חוזרת על עצמה בשטח הזמין וחיתוך לפי הצורך.
• round: התמונה חוזרת על עצמה באופן אופקי ואנכי כדי להתאים כמה שיותר מופעים לשטח הזמין. מכיוון שהשטח הזמין מאריך את גודל התמונה, ולאחר מתיחת מחצית מהרוחב המקורי של התמונה, היא מכווצת כדי להוסיף מופעים נוספים של התמונה.
• space: התמונה חוזרת על עצמה באופן אופקי ואנכי כדי להתאים לכמה שיותר מופעים של התמונה במקום הזמין, בלי לחתוך את התמונה, ולהפריד בין המופעים של התמונה לפי הצורך. תמונות חוזרות נוגעות בקצוות של השטח ששכבת הרקע תופסת, ושטח לבן מחולק ביניהן באופן שווה.

המאפיין background-repeat מאפשר להגדיר את ההתנהגות של ציר ה-x וציר ה-y בנפרד. הפרמטר הראשון מגדיר את התנהגות החזרה האופקית, והפרמטר השני מגדיר את התנהגות החזרה האנכית.

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

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

הערך repeat-x חוזר על תמונה אופקית בלבד. הערך הזה שווה ערך ל-repeat no-repeat.

בהדגמה הבאה מוצגות היכולות האלה של הנכס background-repeat:

מיקום הרקע

תמיכה בדפדפן

• 1
• 12
• 1
• 1

מקור

ודאי ששמת לב לכך שתמונות מסוימות באינטרנט מעוצבות באמצעות הצהרת background-repeat: no-repeat, ולכן תמונות כאלה מוצגות בצד ימין למעלה במאגר שלהן.

המיקום הראשוני של תמונות הרקע הוא בפינה הימנית העליונה. המאפיין background-position מאפשר לשנות את ההתנהגות הזו על ידי קיזוז המיקום של התמונה.

כמו ב-background-repeat, המאפיין background-position מאפשר למקם תמונות לאורך ציר ה-x ו-y בנפרד, עם שני ערכים כברירת מחדל.

כשמשתמשים באורכים ובאחוזים ב-CSS, הפרמטר הראשון תואם לציר האופקי והפרמטר השני תואם לציר האנכי.

כאשר משתמשים במילות המפתח רק בסדר של מילות המפתח לא משנה:

מה מותר לעשות

background-position: left 50%;

מה מותר לעשות

background-position: top left;

מה מותר לעשות

background-position: left top;

הסדר לא משנה למילות מפתח שמשויכות לצירים שונים של מיקום.

מה אסור לעשות

  background-position: 50% left;

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

מה אסור לעשות

  background-position: left right;

לא ניתן להשתמש בו-זמנית במילות מפתח שמשויכות לאותו ציר.

למאפיין background-position יש גם קיצור של ערך אחד נוח; הערך שהושמט זוכה ל-50%. הנה דוגמה שממחישה את זה באמצעות מילות המפתח שנכס background-position מקבל:

בנוסף לצורת ברירת המחדל של שני הפרמטרים וצורת הפרמטר אחת; הנכס background-position מקבל גם עד ארבעה פרמטרים.

כאשר נעשה שימוש בשלושה או ארבעה פרמטרים, יש להוסיף לפני אורך או אחוז של CSS את מילות המפתח top, left, right או bottom כדי שהדפדפן יוכל לחשב מאיזה קצה של תיבת ה-CSS אמור להיות מקור ההיסט.

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

מה מותר לעשות

background-position: bottom 88% right;

מה מותר לעשות

background-position: right bottom 88%;

מה אסור לעשות

background-position: 88% bottom right;

כשמשתמשים בשלושה פרמטרים או יותר, צריך להוסיף את מילות המפתח top, right, bottom או left לפני ערך האורך של CSS.

מה מותר לעשות

background-position: bottom 88% right 33%;

מה מותר לעשות

background-position: right 33% bottom 88%;

מה אסור לעשות

background-position: 88% 33% bottom left;

כשמשתמשים בשלושה פרמטרים או יותר, צריך להוסיף את מילות המפתח top, right, bottom או left לפני ערך האורך של CSS.

אם מפעילים את הפונקציה background-position: top left 20% על תמונת רקע של CSS, התמונה ממוקמת בחלק העליון של התיבה. הערך של 20% מייצג קיזוז של 20% מהחלק השמאלי של התיבה (על ציר ה-x).

אם background-position: top 20% left מוחל על תמונת רקע של CSS, הערך של 20% מייצג קיזוז של 20% מהחלק העליון של תיבת ה-CSS (בציר ה-y), והתמונה תוצב בצד שמאל של התיבה.

כאשר נעשה שימוש בארבעה פרמטרים, מתבצעת התאמה בין שתי מילות המפתח לבין שני ערכים התואמים את הקיזוז של כל מילת מפתח שצוינה. אם מפעילים את המדיניות background-position: bottom 20% right 30% על תמונת רקע, תמונת הרקע ממוקמת 20% מהחלק התחתון ו-30% מימין לתיבת ה-CSS.

בהדגמה הבאה אפשר לראות את ההתנהגות הזו:

ריכזנו כאן דוגמאות נוספות לשימוש בנכס background-position באמצעות שילוב של ערכי CSS ומילות מפתח:

הערה: לקבלת מידע נוסף על הניואנסים שקשורים למיקום רקעים, אפשר לעבור אל background-position ב-MDN.

גודל הרקע

תמיכה בדפדפן

• 3
• 12
• 4
• 5

מקור

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

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

הנכס background-size מקבל את מילות המפתח הבאות:

• auto: כשמשתמשים בו בנפרד, הגודל של תמונת הרקע נקבע על סמך הרוחב והגובה הפנימיים שלה. כשמשתמשים ב-auto לצד ערך CSS אחר ביחס לרוחב (פרמטר ראשון) או לגובה (פרמטר שני), המידות שהוגדרו כ-auto יוגדלו לפי הצורך כדי לשמור על יחס הגובה-רוחב הטבעי של התמונה. זוהי התנהגות ברירת המחדל של הנכס background-size.
• cover: מכסה את כל האזור של שכבת הרקע. המשמעות היא שהתמונה מתוחה או חתוכה.
• contain: גודל התמונה ימלא את השטח, בלי למתוח או לחתוך אותה. לכן יכול להיות שעדיין יישאר שטח ריק שיגרום לתמונה לחזור על עצמה, אלא אם הערך שמוגדר לפרמטר background-repeat הוא no-repeat.

בשני המדדים האלה ניתן להשתמש בנפרד, ללא פרמטר נוסף.

הדוגמה הבאה ממחישה את מילות המפתח האלה בפעולה:

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

קובץ מצורף ברקע

תמיכה בדפדפן

• 1
• 12
• 1
• 1

מקור

המאפיין background-attachment מאפשר לשנות את התנהגות המיקום הקבוע של תמונות רקע (תמונות שהן חלק משכבת רקע) ברגע שהשכבה גלויה במסך.

היא מקבלת 3 מילות מפתח: scroll, fixed ו-local.

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

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

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

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

מקור הרקע

תמיכה בדפדפן

• 1
• 12
• 4
• 3

מקור

המאפיין background-origin מאפשר לשנות את האזור של רקעים שמשויכים לתיבה מסוימת. הערכים שהמאפיין מקבל תואמים לאזורים של תיבה border-box , padding-box ו-content-box .

תוכלו לנסות את האפשרויות האלה בעזרת ההדגמה הבאה:

קליפ ברקע

תמיכה בדפדפן

• 1
• 12
• 4
• 5

מקור

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

כמו background-origin, האזורים שניתן לציין הם border-box, padding-box ו-content-box בהתאם למקום שבו ניתן לעבד את שכבת הרקע של CSS. בעת שימוש במילות מפתח אלה, כל עיבוד של הרקע שנמצא מעבר לאזור שצוין ייחתך או ייחתך.

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

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

תמיכה בדפדפן

• 1
• 12
• 4
• 5

מקור

הערה: המאפיין הזה לא תואם להגדרה של background-clip: text בו-זמנית בתיבת CSS.

רקעים מרובים

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

רקעים מרובים מוגדרים מלמעלה למטה. הרקע הראשון הוא הקרוב ביותר למשתמש והרקע האחרון הוא הרחוק ביותר מהמשתמש.

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

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

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

background-image: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png"),
    url("https://assets.codepen.io/7518/blob.svg"),
    linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5));
  background-size: contain, cover, auto;
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: 50% 50%, 10% 50%, 0% 0%;
  background-origin: padding-box, border-box, content-box;

הקיצור של הרקע

כדי שיהיה קל יותר לעצב את שכבת הרקע של תיבה, במיוחד כשרוצים להשתמש במספר שכבות רקע – יש קיצור דרך לפי התבנית הספציפית הבאה:

background:
  <background-image>
  <background-position> / <background-size>?
  <background-repeat>
  <background-attachment>
  <background-origin>
  <background-clip>
  <background-color>?

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

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

בהצהרה הבאה נחתם הרקע ומקורו בתיבת התוכן:

background: url("https://assets.codepen.io/7518/blob.svg") 50%
      50% / contain no-repeat content-box;

תוך התחשבות בסמנטיקה הקצרה הזו, ניתן לשכתב את ההצהרות הקודמות הקשורות לרקע של קטע הקוד כך שיהיו כך:

background: url("https://assets.codepen.io/7518/pngaaa.com-1272986.png") 50% 50%/contain no-repeat padding-box, url("https://assets.codepen.io/7518/blob.svg") 10% 50% / cover border-box, linear-gradient(hsl(191deg, 40%, 86%), hsla(191deg, 96%, 96%, 0.5) ) 0% 0% / cover no-repeat content-box ;

בדיקת ההבנה

בחינת הידע שלכם ברקעים של CSS

תמונות הרקע ממוקמות בפינה השמאלית העליונה של תיבת CSS.

נכון

נכון!

לא נכון

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

כברירת מחדל, תמונות הרקע לא חוזרות על עצמן.

לא נכון

יש להשתמש ב-background-repeat: no-repeat באופן מפורש כדי לא לחזור על תמונת רקע. בנוסף, אפשר להשתמש ב-background-repeat: repeat-x וב-background-repeat: repeat-y כדי למנוע חזרה על צירים ספציפיים.

נכון

נכון!

אילו מההצהרות הבאות לגבי background-position תקפות?

background-position: 50% left

כשמשתמשים בערכי CSS עם מילות מפתח, יש חשיבות לסדר הערכים.

background-position: top right 33%

הפעולה הזו תמקם את תמונת הרקע בחלק העליון של התיבה ב-33% מהקצה הימני של התיבה.

background-position: right bottom

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

background-position: left

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

כדי להגדיר תמונת רקע שתהיה קבועה באזור התצוגה שבו אתם משתמשים:

background-position: fixed

'ערך לא חוקי של המאפיין background-position.'

background-fixed-to-viewport: true

background-fixed-to-viewport עדיין לא קיים ב-CSS.

background-attachment: fixed

background-attachment: fixed מגדיר במפורש את תמונת הרקע שתותקן בתוך אזור התצוגה הנוכחי.

background-attachment: scroll

'background-attachment הוא המאפיין שבו משתמשים כדי להגדיר תמונת רקע שתותקן בתוך אזור תצוגה. עם זאת, scroll הוא ערך ברירת המחדל של המאפיין, שמתקן את תמונת הרקע כברירת מחדל לתיבה שהתוכן שבתיבה לא יושפע ממנה.'

ברירת המחדל של מקור הרקע בתוך תיבת CSS הוא:

content-box

ערך חוקי עבור background-origin, אך אינו ברירת המחדל.

border-box

אפשר לצבוע את הערך החוקי של background-origin ואת הגבולות המאורגנים מראש על רקעים, אבל הוא לא ברירת המחדל.

padding-box

ערך ברירת המחדל של background-origin. מאפשר עיבוד של הרקע מעבר לתוכן ועד לגבול של תיבה.

margin-box

זהו אזור מזוהה של תיבת CSS, אבל זהו ערך לא חוקי עבור המאפיין background-origin.