צור קשר
מאמרים אחרונים
תכונת background ב-CSS
על מנת לעצב באמצעות CSS את הרקע שיופיע מאחורי אלמנט כלשהו באתר, משתמשים בחמש תכונות שונות של הרקע:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
בפרק זה נפרט למה משמשת כל אחת מהתכונות הללו וכיצד מעצבים בעזרתן את האפקטים ברקע.
שינוי צבע הרקע
ניתן להגדיר צבע רקע לעמודים באתר, או באופן ספציפי יותר - להגדיר מאפייני רקע שונים עבור אלמנטים מסוימים, כמו כותרות, פסקאות, טבלאות וכיוצא באלה.
צבע רקע עבור עמודי האתר יוגדר ע"י שימוש בתכונה background-color בתוך סלקטור body, כמו בדוגמה הבאה:
background-color:#1199aa;
}
צבע רקע עבור אלמנט מסוים יוגדר בתוך הסלקטור של אלמנט זה. בדוגמה הבאה מוגדרים צבעי רקע שונים עבור פסקאות וכותרות h1:
background-color:#3445ed;
}
p {
background-color:#00ff22;
}
קביעת תמונת רקע
התכונה background-image מגדירה איזו תמונה תופיע ברקע של אלמנט כלשהו בעמוד. התמונה שבחרנו תשוכפל כמה פעמים שיהיה צריך על מנת לכסות את כל שטח הרקע של אותו אלמנט, ולכן אם האלמנט מכיל טקסט, רצוי לבחור בתמונת רקע שלא תפגע בקריאות של התוכן.
תמונת הרקע תוגדר ב-CSS באופן הבא:
background-image:url('rain.webp');
}
חזרה על אפקט ברקע
התכונה background-repeat מאפשרת לקבוע את אופי השכפול והחזרה על תמונת הרקע (במקרה שהאובייקט שלנו גדול מתמונת הרקע והיא לא מכסה את כולו). נוכל לקבוע האם לחזור על תמונת רקע באופן אנכי בלבד, אופקי בלבד, לחזור בשני הכיוונים (זוהי ברירת המחדל), או בכלל לא לבצע חזרות. השימוש באפשרות זו נעשה כאשר מסיבה כלשהי חזרה על תמונת הרקע איננה נראית טוב.
כדי ליצור חזרה אנכית נשתמש בערך repeat-y, ולחזרה אופקית נשתמש באלמנט repeat-x. לחזרה בשני הצירים, נשתמש ב- repeat ועל מנת לא לחזור כלל, נשתמש ב- no-repeat. בדוגמא הבאה נחזור על תמונת הרקע לכל אורך ציר x, עד לקבלת כיסוי מלא של כל העמוד בתמונה המשוכפלת:
background-image:url('rain1.webp');
background-repeat:repeat-x;
}
קביעת מיקום תמונת רקע
לעיתים, כאשר האובייקט בו מופיעה תמונת הרקע גדול מרזולוציית התמונה, נרצה למקם את התמונה בחלק זה או אחר של האובייקט (למשל במרכזו, או בפינה הימנית תחתונה שלו). נוכל להגדיר את מיקום תמונת הרקע ע"י התכונה background-position.
הדוגמה הבאה מראה כיצד מגדירים שתמונת הרקע תופיע פעם אחת בלבד (no-repeat) בפינה השמאלית העליונה של המסך:
background-image:url('bird.webp');
background-repeat:no-repeat;
background-position:left top;
}
התכונה Attachment
התכונה background attachment משמשת בכדי להגדיר האם תמונת הרקע תהיה קבועה (fixed) ותישאר במקומה גם כשאנו גוללים מטה את הטקסט, או שהיא תנוע יחד עם הטקסט, כך שאם התמונה ממוקמת למשל בראש העמוד, אז היא לא תופיעה כאשר נגלול כלפי מטה.
הדוגמה הבאה מדגימה כיצד להגדיר שתמונת הרקע תנוע מעלה ומטה בעת הגלילה:
background-image:url('bull.webp');
background-repeat:no-repeat;
background-attachment:scroll;
}
ניתן להשתמש באפשרויות הבאות: scroll לגלילה (זו ברירת המחדל), או fixed (רקע קבוע).
קיצור מאפייני רקע
למעלה פורטו כמה וכמה תכונות שונות הקשורות להגדרות הרקע באתר. על מנת לקצר את הקוד ולחסוך זמן, ניתן לכתוב את כל התכונות בצורה מקוצרת, כמו בדוגמה הבאה:
background:#eeffee url('img_rainbow.webp') no-repeat left top;
}
סדר התכונות איננו אקראי והוא יהיה תמיד:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
ניתן להחסיר תכונה כלשהי, כל עוד סדר התכונות הנ"ל נשמר.
כפתור עם רקע שקוף
עושים את זה באמצעות קביעת הערך transparent (שפירושה: שקוף) לתכונה background-color.
בברכה,
דוד
שאלה דחופה!!!
איך
שקיפות התמונה
הגדלת תמונה
שאלה..
האתר הזה...
מה המצב?
רקע ל-DIV
במידה וגודל התמונה אינה כגודל ה-DIV, יש למתוח את התמונה לגובה ו/או לרוחב באמצעות הגדרות width ו-height. לחילופין, ניתן לבצע חזרה של תמונת הרקע בתוך ה-DIV, ע"י הגדרת repeat-x ו/או repeat-y ו/או repeat כחלק מהגדרת background כפי שמוסבר במאמר זה.
דוד
רקע שלא מכסה את כול ה-div
יש לי רקע שהכנסתי לתוך ה-div והוא לא מכסה את כולו גם אחרי שמירה מה לעשות?
שולחת תמונה
http://img841.imageshack.us/img841/9536/oj7t.jpg (להסתכל בזכוכית מגדלת מצד ימין בפוטושופ)
מתיחת תמונה
אתה צריך לקבוע לתמונה גובה ורוחב. אם ידוע גודל העמוד, אתה יכול לתת את המימדים בפיקסלים. אחרת תשתמש באחוזים.
למשל: height:100%
תודה,
דוד
גודל תמונת רקע
תמונה ב-CSS
אם תוכל לפרט מעט יותר על המקרה שלך, אשמח לעזור.
דוד
הגדרת תמונה
איך