רקעים

The CSS Podcast – 053: Background

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

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

צבע הרקע

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

תמונות רקע

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

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

הגדרת background-image באמצעות פונקציית ה-CSS url

רקעים בגוון מדורג ב-CSS

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

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

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

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

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

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

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

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

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

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

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

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

מיקום הרקע

יכול להיות ששמתם לב שלפעמים תמונות באינטרנט מעוצבות באמצעות הצהרת 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;

  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;

background-position: bottom 88% right 33%;

background-position: right 33% bottom 88%;

background-position: 88% 33% bottom left;

אם הקוד 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% מוחל על background-image, תמונת הרקע ממוקמת 20% מהחלק התחתון ו-30% מהצד הימני של תיבת ה-CSS.

הדגמה הבאה מדגימה את ההתנהגות הזו:

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

גודל הרקע

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

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

אפשר להשתמש במילות המפתח הבאות במאפיין background-size:

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

שני הפרמטרים האחרונים מיועדים לשימוש עצמאי, ללא פרמטר נוסף.

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

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

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

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

אפשר להזין בו 3 מילות מפתח: scroll,‏ fixed ו-local.

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

שימוש בערך fixed קובע את המיקום של תמונות הרקע ביחס למסך.

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

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

מקור הרקע

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

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

קטע וידאו לרקע

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

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

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

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

מספר רקעים

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

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

הרקע היחיד שהוגדר או השכבה האחרונה מוגדרים על ידי הדפדפן כשכבת הרקע הסופית. רק לשכבה הזו מותר להקצות 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