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

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

 
מאמרים אחרונים מאמרים אחרונים
09/08/2023 17:16
בניית חנות באינטרנט למכירה של מוצרים לחיות מחמד
12/03/2023 22:03
במאמר זה נסקור את התפתחות שפת צד השרת PHP מראשית ימיה, לכל אורך גירסאותיה השונות עד לאן שהיא הגיעה ב...
08/01/2023 23:40
הקמת אתר מכירות לדלתות פנים וחוץ לבתים פרטיים ולעסקים וציוד פירזול
תגובות אחרונות תגובות אחרונות
עיצוב רקע - background
12/06/2023 19:52
היי תמר, עושים את זה באמצעות ...
עיצוב רקע - background
28/05/2023 21:36
אני רוצה ליצור כפתור שהרקע שלו...
עיצוב רקע - background
15/12/2022 20:22
איך עושים שיראו את כל התמונת ר...
תגובות אחרונות פוסטים אחרונים בפורום
08/11/2022 19:11
היי, יש לי אתר קצת מורכב. הוא...
08/11/2022 19:09
היי, אני עוסק בענף הטניס ויש ...
08/11/2022 19:03
היי, ראיתי בכל מיני אתרים שמש...

עיצוב רקע - background

  1. דף הבית
  2. מדריך HTML5 למתכנת המתחיל
  3. עיצוב רקע - background
פרק זה עוסק בהגדרת תכונות הרקע (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

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

 

הוספת תגובה

כפתור עם רקע שקוף

12/06/2023 19:52
דוד כהן
היי תמר,
עושים את זה באמצעות קביעת הערך transparent (שפירושה: שקוף) לתכונה background-color.
בברכה,
דוד

שאלה דחופה!!!

28/05/2023 21:36
תמר
אני רוצה ליצור כפתור שהרקע שלו בלבד יהיה שקוף כך שיוכלו לראות דרכו את הרקע של העמוד עצמו ושאוכל לכתוב בתוכו טקסט או להוסיף עליו תמונות (בקיצור רק הרקע שקוף), איך אני עושה את זה?

איך

15/12/2022 20:22
משהו אחד
איך עושים שיראו את כל התמונת רקע בעוד שהיא גדולה מהdiv שלה?

שקיפות התמונה

03/08/2022 22:16
ישראל ישראלי
אפשר לעשות שתמונת הרקע תהיה שקופה קצת?

הגדלת תמונה

18/11/2021 11:26
יואל
לא ממש הבנתי איך מגדילים את התמונה . נסיתי לעשות img{}

שאלה..

27/09/2020 14:04
אפרת
איך אפשר לשנות צבע של תמונה ב HTML.?

האתר הזה...

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

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