Get Adobe Flash player
דף הבית כללי עיצוב מאפייני רקע

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

מאפייני הרקע כוללים 5 סוגים:

"
שימושמאפיין
צבע רקע background-color
תמונת רקע background-image
ריצוף (חזרה של התמונה) background-repeat
קיבוע תמונת רקע background-attachment
מיקום תמונת רקע background-position

צבע רקע

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

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

body {
         background-color: #ffff00;
         }

הגדרת הצבע:

קיימות שלוש דרכים להגדרת הצבע (לדוגמא, הגדרת הצבע כתום):

  • ערך הקסאדצימלי:  #ff8800
  • ערך דצימאלי (עשרוני, מבוסס rgb): rgb(255,136,0)
  • ערך טקסטואלי: orange

מקרה מיוחד הוא בכתיבה של ערך הקסאדצימלי בו זוגות הספרות זהות. למשל ערך ההקסא של כתום הוא ff8800. זוג הספרות של האדום הוא ff, של הירוק הוא 88 ושל הכחול 00. במקרה כזה, אפשר לכתוב ספרה אחת מכל זוג:

  • כתום: #f80
  • שחור: #000
  • לבן: #fff

תמונת רקע

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

ערכו של מאפיין תמונת הרקע מבוסס על מתן הכתובת של הקובץ. הוספת כתובת ב CSS היא בטכניקה קבועה (נראה זאת גם במאפיינים נוספים) והיא בנוייה מהמילה url שבעקבותיה, ובתוך סוגריים, מופיעה כתובת התמונה כשהיא נתונה בתוך גרש (פסיק עליון). בדוגמא הבאה נוסיף תמונת רקע לבורר ה body:

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

ריצוף תמונה (הכפלת התמונה)

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

בדוגמא הבאה, הטבלה (שגובהה 400px) מרוצפת בתמונה משתנה (gradient) בגובה של 200px  ורוחב של 10px. הריצוף האופקי יוצר חזות נקיה משמאל לימין. אולם הריצוף האנכי מיותר, כי נוצרת שורה שנייה של ריצוף.

תמונה בריצוף אופקי ואנכי תמונה בריצוף אופקי בלבד

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

  • ריצוף אופקי: background-repeat: repeat-x
  • ריצוף אנכי: background-repeat: repeat-y
  • ללא ריצוף כלל: background-repeat: no-repeat

מיקום תמונה ללא ריצוף

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

הזזת התמונה באמצעות ערך טקסטואלי:

 בציר האופקי: right, center, left

בציר האנכי top, center, bottom.

בכתיבה אין להשתמש בפסיקים

מיקום תמונה על המסך למטה ובאמצע נכתבת כך: background-position: bottom center

הזזת התמונה באמצעות ערך מספרי:

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

מיקום תמונה 100 פיקסלים מהשמאל (או מהימין, אם נקבע dir="rtl") ו-200 פיקסלים כלפי מטה ייראה כך:

background-position: 100px 200px;

קיבוע התמונה

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

ריכוז הפקודות לכלל שורה אחת

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

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

בדוגמא הבאה, צבע הרקע הוא לבן, התמונה nice_tree מופיעה בפינה הימנית העליונה ללא ריצוף.

body { background:#ffffff url('nice_tree.png') no-repeat right top; }

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

ראשון הוא צבע הרקע, לאחריו שם התמונה, ריצוף, קיבוע ולבסוף מיקום.
.

אל השיעור הבא