מאמרים אחרונים מאמרים אחרונים
23/01/2019 15:14
אנו במיזם גרופ קיבלנו את תו אמון הציבור להגינות בעסקים.
24/10/2018 19:39
מתכנן הקמת חנות מתנות מקוונת? אספנו עבורך כל מה שחשוב לדעת לפני שאתה יוצא לדרך.
15/09/2018 19:27
יש לך עסק למכירת רהיטים או שאתה מתכנן אחד כזה בקרוב? קרא איך הקמת חנות וירטואלית למכירה של רהיטים בא...
06/09/2018 18:05
מחשבים זו אהבת חייך? האם חשבת למכור מחשבים, טלפונים סלולריים, קונסולות משחק וציוד היקפי באינטרנט? המ...
24/08/2018 13:39
הקמת פורטל בריאות באנגלית
תגובות אחרונות תגובות אחרונות
בניית חנות וירטואלית
29/08/2018 13:50
חברה לבניית אתר וחנות וירטואלי...
שפת שרת מול שפת לקוח
04/07/2018 15:45
היי, השפות PHP ו-PYTHON שתי...
שפת שרת מול שפת לקוח
04/07/2018 14:10
מה ההבדל בין php ל python

עיצוב רקע

»
»
עיצוב רקע

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

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

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

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

צבע הרקע

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

צבע רקע עבור עמודי האתר יוגדר ע"י שימוש בתכונה background-color בתוך סלקטור body, כמו בדוגמה הבאה:

body {
    background-color:#1199aa;
}

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

h1 {
    background-color:#3445ed;
}
p {
    background-color:#00ff22;
}

תמונת רקע

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

תמונת הרקע תוגדר ב-CSS באופן הבא:

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

חזרה על אפקט ברקע

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

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

body {
    background-image:url('rain1.jpg');
    background-repeat:repeat-x;
}

קביעת מיקום תמונת רקע

לעיתים, כאשר האובייקט בו מופיעה תמונת הרקע גדול מרזולוציית התמונה, נרצה למקם את התמונה בחלק זה או אחר של האובייקט (למשל במרכזו, או בפינה הימנית תחתונה שלו). נוכל להגדיר את מיקום תמונת הרקע ע"י התכונה background-position.

הדוגמה הבאה מראה כיצד מגדירים שתמונת הרקע תופיע פעם אחת בלבד (no-repeat) בפינה השמאלית העליונה של המסך:

body {
    background-image:url('bird.jpg');
    background-repeat:no-repeat;
    background-position:left top;
}

Attachment

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

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

body {
    background-image:url('bull.jpg');
    background-repeat:no-repeat;
    background-attachment:scroll;
}

ניתן להשתמש באפשרויות הבאות: scroll לגלילה (זו ברירת המחדל), או fixed (רקע קבוע).

קיצור מאפייני רקע

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

body {
    background:#eeffee url('img_rainbow.jpg') no-repeat left top;
}

סדר התכונות איננו אקראי והוא יהיה תמיד:

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

ניתן להחסיר תכונה כלשהי, כל עוד סדר התכונות הנ"ל נשמר.

 

הוספת תגובה

האתר הזה...

15/07/2015 0:56
עידית משה
האתר הזה פשוט מקדם אותי ב-HTML ו-CSS

מה המצב?

31/07/2014 11:42
ישראל ישראלי
אפשר גם להשתמש בתכונת cover של התמונה כך שתכסה את הDIV באופן המיטבי...

רקע ל-DIV

21/05/2014 12:03
דוד כהן
היי,

במידה וגודל התמונה אינה כגודל ה-DIV, יש למתוח את התמונה לגובה ו/או לרוחב באמצעות הגדרות width ו-height. לחילופין, ניתן לבצע חזרה של תמונת הרקע בתוך ה-DIV, ע"י הגדרת repeat-x ו/או repeat-y ו/או repeat כחלק מהגדרת background כפי שמוסבר במאמר זה.

דוד

רקע שלא מכסה את כול ה-div

11/05/2014 0:42
גליה
שלום!
יש לי רקע שהכנסתי לתוך ה-div והוא לא מכסה את כולו גם אחרי שמירה מה לעשות?
שולחת תמונה

http://img841.imageshack.us/img841/9536/oj7t.jpg (להסתכל בזכוכית מגדלת מצד ימין בפוטושופ)

מתיחת תמונה

17/12/2013 13:00
דוד כהן
היי ברקת,

אתה צריך לקבוע לתמונה גובה ורוחב. אם ידוע גודל העמוד, אתה יכול לתת את המימדים בפיקסלים. אחרת תשתמש באחוזים.
למשל: height:100%

תודה,
דוד

גודל תמונת רקע

17/12/2013 12:33
ברקת
יש לי תמונה קטנה ואני רוצה שהיא תמתח על כל העמוד .איך עושים את זה?

תמונה ב-CSS

28/07/2013 19:12
דוד כהן
היי אלי,
אם תוכל לפרט מעט יותר על המקרה שלך, אשמח לעזור.
דוד

הגדרת תמונה

26/07/2013 23:33
אלי
איך מגדירים את התמונה בCSS בחלק התחתון של האתר

איך

20/05/2012 15:24
בראל
איך מעצבים רקע למחשב

רוצה שנקפיץ גם את העסק שלך?

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

שילוב מנצח של טכנולוגיה שהיא חוד החנית עם ליווי אישי להצלחה!

 

לא מהססים! ממלאים את הטופס או מתקשרים עכשיו 077-7644819

 
שנקפיץ לך את העסק?
לחץ כאן
התקשר עכשיו 077-7644819
או מלא את הטופס להלן: