כללי עיצוב מאפייני רקע
מאפייני הרקע ב CSS נועדו לעצב את הרקע של האלמנטים.
מאפייני הרקע כוללים 5 סוגים:
| שימוש | מאפיין |
|---|---|
| צבע רקע | background-color |
| תמונת רקע | background-image |
| ריצוף (חזרה של התמונה) | background-repeat |
| קיבוע תמונת רקע | background-attachment |
| מיקום תמונת רקע | background-position |
צבע רקע
המאפיין background-color קובע צבע רקע לאלמנט. זה יכול להיות לכל אלמנט שיכול לקבל צבע רקע.
המוכר שבהם הוא כמובן ה body, אך גם תגי פסקה, כותרת טבלה, תאים וכו' יכולים לקבל צבע רקע. בדוגמא הבא ניתן צבע רקע לבורר body:
background-color: #ffff00;
}
הגדרת הצבע:
קיימות שלוש דרכים להגדרת הצבע (לדוגמא, הגדרת הצבע כתום):
- ערך הקסאדצימלי: #ff8800
- ערך דצימאלי (עשרוני, מבוסס rgb): rgb(255,136,0)
- ערך טקסטואלי: orange
מקרה מיוחד הוא בכתיבה של ערך הקסאדצימלי בו זוגות הספרות זהות. למשל ערך ההקסא של כתום הוא ff8800. זוג הספרות של האדום הוא ff, של הירוק הוא 88 ושל הכחול 00. במקרה כזה, אפשר לכתוב ספרה אחת מכל זוג:
- כתום: #f80
- שחור: #000
- לבן: #fff
תמונת רקע
המאפיין background-image מכניס תמונה לרקע של האלמנט (כל אלמנט שיכול לקבל תמונה). התמונה מכפילה עצמה לרוחב ולגובה ויוצרת אפקט של ריצוף על המסך.
ערכו של מאפיין תמונת הרקע מבוסס על מתן הכתובת של הקובץ. הוספת כתובת ב CSS היא בטכניקה קבועה (נראה זאת גם במאפיינים נוספים) והיא בנוייה מהמילה url שבעקבותיה, ובתוך סוגריים, מופיעה כתובת התמונה כשהיא נתונה בתוך גרש (פסיק עליון). בדוגמא הבאה נוסיף תמונת רקע לבורר ה body:
ריצוף תמונה (הכפלת התמונה)
ריצוף מסך מלא אינו רצוי בהכרח, ולא תמיד.. לעיתים צריך שהוא יתבצע רק אופקית, או אולי דווקא בציר האנכי.
בדוגמא הבאה, הטבלה (שגובהה 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 מופיעה בפינה הימנית העליונה ללא ריצוף.
אין חובה להכניס את כל הערכים, אך סדר הפעולות לריכוז הוא חשוב ויש להקפיד עליו:
ראשון הוא צבע הרקע, לאחריו שם התמונה, ריצוף, קיבוע ולבסוף מיקום.
.
