מדריך לעיצוב סוגי רקע בעזרת CSS

אחד ההיבטים החשובים ביותר בעיצובו של כל דף HTML הוא עיצוב הרקע של הדף ושל האלמנטים השונים המרכיבים אותו. בפרק זה נעסוק בדרכים השונות להשפיע על הרקע של דפי HTML ומרכיביהם בעזרת CSS ותכונותיו:


שליטה בצבע הרקע

על מנת לקבוע מה יהיה צבע הרקע של דף שלם או של אלמנט כלשהו בתוך דף HTML נשתמש בתכונה המובנית: Background-color. הרקע של דף או אלמנט הוא כל השטח המוגדר על ידי אורכו ורוחבו של אותו דף או אלמנט בתוכו. התכונה תקבל ערך מספרי המייצג צבע. ניתן להשתמש לשם כך בערך הקסהדצימלי, בערך שנקבע בערכי RGB או באחד משמות הצבעים המוכרים כחלק משפת HTML.

אם נרצה שכל הדף שלנו יהיה בעל צבע רקע מסוים אזי כדאי יהיה לנו להגדיר צבע זה לאלמנט <body>. דוגמה לכך ניתן לראות כאן:

דוגמה לקביעת צבע הרקע של דף שלם
body {background-color:yellow;}

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

קביעת צבע הרקע תוך שימוש בערך RGB
h1 {background-color:rgb(255,140,15);}
קביעת צבע רקע של אלמנט תוך שימוש בערך הקסהדצימלי
p {background-color:#FF00F0;}
קביעת צבע הרקע של אלמנט תוך שימוש בשם שמור לצבע
body {background-color:pink;}

יצירת רקע באמצעות תמונה

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

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

דוגמה לשימוש בתמונה לצורך קביעת תמונת הרקע של דף שלם
body {background-image:url('star.gif');

הצגה חוזרת של תמונת רקע (Image Reapeat)

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

התכונה Background-repeat יכולה לקבל את הערכים הבאים: repeat, repeat-x, repeat-y, norepeat. הערכים שאותם נדגים יהיו: repeat-x ו - repeat-y שבאמצעותם נקבע האם התמונה תחזור על עצמה לאורך ציר ה - X או לאורך ציר ה - Y. כלומר האם התמונה תחזור על עצמה משמאל לימין או מלמעלה למטה.

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

דוגמה לשימוש בתמונה בפריסה משמאל לימין כדי ליצור רקע
body {background-image:url('gradient.jpg');
background-repeat:repeat-x;

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

דוגמה לשימוש בתמונה בפריסה מלמעלה למטה כדי ליצור רקע
body {background-image:url('gradient.jpg'); background-repeat:repeat-y;

קביעת מיקומה של תמונת רקע

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

ערך הסבר
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
מילים שמורות לקביעת מיקום תמונת הרקע
%x%y ערכי ה - X וה - Y באחוזים של הפינה השמאלית העליונה של תמונת הרקע.
הפינה השמאלית העליונה של האלמנט שבו מוגדרת תמונת הרקע תהיה בעלת הערכים 0% 0%.
XY ערכי ה - X וה - Y של הפינה השמאלית העליונה של התמונה.
Inherit מגדיר האם האלמנט שבתוכו מגדירים רקע יקבל את הגדרות

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

דוגמה לשימוש במילים שמורות לצורך קביעת מיקום תמונת הרקע
body {background-image:url('comp.gif');
background-repeat:no-repeat;
background-position:right top;}
דוגמה לשימוש בערכי פיקסל לצורך קביעת מיקום תמונת הרקע
body {background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:150 10;}
דוגמה לשימוש בערכים אחוזיים לצורך קביעת מיקומה של תמונת הרקע
body {background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:100% 10%;}

נעילה ושחרור של תמונות רקע

התכונה background-attachment מאפשרת לקבוע האם תמונת הרקע תישאר קבועה במקומה או שהיא תנוע כאשר נגלול את דף ה - HTML שלנו. בדוגמה הבאה אראה כיצד לקבע את התמונה במקומה. כדי להתרשם מן הקוד טוב יותר מומלץ ללחוץ על הכפתור "נסו בעצמכם":

דוגמה לקוד שיקבע את תמונת הרקע כך שלא תנוע בגלילה
body { background-image:url('comp.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}

אם ברצוננו שבשעת גלילת הדף תמונת הרקע לא תתקבע אלא תיגלל אף היא עם הדף אזי עלינו להחליף את הערך fixed שהתכונה background-image מקבלת בערך: scroll, כפי שמודגם בקטע הקוד הבא:

דוגמה לקוד שאינו מקבע את תמונת הרקע כך שתוכל לנוע עם תנועת הגלילה
body {
background-image:url('comp.gif');
background-repeat:no-repeat;
background-attachment:scroll;
}

חומר נוסף בנושא

מחולל קוד CSS לרקע  (background)

 
© 2010-2013  www.Devschool.co.il | מדיניות פרטיות | תנאי שימוש