יצירת קשר עם חברת בניית אתרים צור קשר

 077-7644819
חייגו או השאירו הודעתכם

 
מאמרים אחרונים מאמרים אחרונים
15/02/2022 22:51
ככה תיבנו חנות וירטואלית מותאמת סלולר שתשפר את חוויית המשתמש ותגדיל את ההמרות.
03/02/2022 0:06
תקן HTML5 לצד הלקוח באתרי אינטרנט הוא התקן המוביל בימינו. קראו על היתרונות של התקן.
31/01/2022 15:40
בניית אתר אינטרנט בשפת צד השרת PHP היא בחירה חכמה בשפת פיתוח ותיקה, מובילה ומהירה.
תגובות אחרונות תגובות אחרונות
מדריך CSS - מתחילים
17/01/2022 19:35
היי, עיצוב עושים עם CSS, ולא ...
מדריך CSS - מתחילים
16/01/2022 20:41
האם יש אפשרות לעצב רקע בתוך דף...
מדריך CSS - מתחילים
18/11/2021 10:18
היי ינון, אתה צריך את הטקסט ש...
תגובות אחרונות פוסטים אחרונים בפורום
27/06/2022 23:53
שלום רב, ישנה בעיה קטנה בא...
27/06/2022 23:51
שלום! הבעיה שלי אסביר אותה הר...
27/06/2022 23:49
הי,כיצד כדאי להשקיע בשיווק של ...

עיצוב רקע

  1. דף הבית
  2. מדריך HTML5
  3. עיצוב רקע

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

תגית 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.webp');
}

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

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

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

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

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

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

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

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

התכונה Attachment

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

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

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

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

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

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

body {
    background:#eeffee url('img_rainbow.webp') 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
בראל
איך מעצבים רקע למחשב
YouTube previewPlay

שנקפיץ יחד את העסק שלך לגבהים חדשים?

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

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

 

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

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