רקעים בשפת CSS

רקעים בשפת CSS

  • פרסומת

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

שפת CSS מאפשרת שליטה במאפיינים של רקעים של אלמנטים. בין היתר, CSS מאפשרת שליטה במאפיינים הבאים:

  • צבע הרקעbackground-color
  • תמונת הרקעbackground-image
  • אופן החזרה של הרקע (במידה ומימדי האלמנט גדולים ממימדי הרקע) – background-repeat
  • חיבור הרקע למסךbackground-attachment
  • מיקום הרקעbackground-position

צבע הרקע

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

h1 {
    background-color: red;
}

הקוד הנ״ל מגדיר שהרקע של כל אלמנט מסוג

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

תמונת הרקע

בשפת CSS ניתן להגדיר קובץ תמונה כרקע של אלמנט מסויים על ידי השימוש במאפיין background-image . המאפיין מקבל כערך את הכתובת URL של הקובץ שיהיה הרקע של האלמנט. לדוגמה:

body {
    background-image: url(images/my-image.jpg);
}

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

body {background-image: url(my-image.jpg);}

אם הקובץ נמצא בתקייה אחרת מהתקייה שבה ממוקם קובץ ה-CSS, לדוגמה התמונה נמצאת בכתובת assets/images/my-image.jpg

והקובץ נמצא בכתובת assets/css/style.css, ההכרזה תראה כך:

body {background-image: url(../images/my-image.jpg);}

הסימן ../ אומר יציאה לתקייה המכילה (כלומר תקייה אחת אחורה בהיררכיית התיקיות).

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

body {
    background-image: url(top-image.jpg), url(middle-image.jpg), url(bottom-image.jpg);
}

חזרת הרקע

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

  • no-repeat – הרקע לא יחזור על עצמו
  • repeat-x – הרקע יחזור על עצמו רק על ציר ה-x (באופן אופקי)
  • repeat-y – הרקע יחזור על עצמו רק על ציר ה-y (באופן אנכי)
  • repeat – הרקע יחזור על עצמו בשני הצירים

ניתן להשתמש במאפיין באופן הבא:

body {
    background-image: url(images/my-image.jpg);
    background-repeat: repeat-x;
}

הקוד הנ״ל מגדיר שהתמונה my-image.jpg תחזור על עצמה באופן אופקי.

חיבור הרקע

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

  • scroll – הרקע זז ביחד עם האלמנט במצב גלילה
  • fixed – הרקע מקובע למסך (viewport) במצב גלילה

ניתן להשתמש במאפיין באופן הבא:

body {
    background-attachment: fixed;
}

מיקום הרקע

לעיתים יש צורך למקם את הרקע בקאורדינטות שונות מ-(0,0) שהן למעשה ברירת המחדל של מיקום הרקע. הצורך הזה מתעורר כאשר נעשה שימוש בתמונה המכילה מספר תמונות בתוכה (image-sprites) או כאשר החיתוך של התמונה לא מתאים לצרכים שלנו. בשפת CSS ניתן להגדיר את קאורדינטות המיקום של התמונה על ציר ה-x וה-y על ידי שימוש במאפיין background-position .

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

body {
    background-position: 50px 50px;
}

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

שילוב המאפיינים

ניתן לשלב בין כל המאפיינים על ידי שימוש במאפיין בודד: background . לדוגמה:

background: #fff url(my-image.jpg) repeat-y scroll 50px 50px;

כשמשתמשים במאפיין background סדר הערכים הוא כדלקמן:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position