7.1 רקע וקידמה - כללי

לכל אלמנט בדף HTML יש רקע (background) וקידמה (foregound), ולכל אחד מהם יש צבע. 

color

התכונה color צובעת את הקידמה (foreground). את האותיות. כפי שצויין לעיל ניתן להשתמש בהגדרות הצבעים בשיטת המילים (green), ערך הקסדצימלי (#00ff00) או שלשות של ערכי RGB. 

---

body {color: rgb(255,255,0)}

---

Background

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

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

---

table{background: url(lines.gif) fixed middle center darkgreen no-repeat;}

---

Property	Description	Values
background	A shorthand property for setting all background properties in one declaration	background-color background-image background-repeat background-attachment background-position
background-attachment	Sets whether a background image is fixed or scrolls with the rest of the page	scroll fixed
background-color	Sets the background color of an element	color-rgb color-hex color-name transparent
background-image	Sets an image as the background	url(URL) none
background-position	Sets the starting position of a background image	top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos
background-repeat	Sets if/how a background image will be repeated	repeat repeat-x repeat-y no-repeat

► הקודם  הבא  ◄

7.2 Background-color

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

מעניין לראות שכותרת <h1> המקבלת צבע רקע נצבעת לרוחב הדף כולו (אלא אם כן היא מוגבלת בטבלה, למשל).

---

p {background-color: #00FF00}

---

► הקודם  הבא  ◄

7.3 Background-image

מקבלת ערך URL של תמונת רקע כלשהי, או את המילה none. תמונת רקע יכולה לבוא על כל הדף או מאחורי אלמנט מסויים.

---

<p style="background-image:url(images/myFace.jpg)"> 

table table{background-image:url(http://www.bgc.com/bg/crisscross.gif)}

---

התמונה הראשונה נקראת inline מתוך תגית

והיא תיושם כרקע לתוכן התגית. 

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

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

► הקודם  הבא  ◄

 

7.4 background-repeat

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

התכונה מקבלת אחד מהערכים:

• repeat-x - תכפיל את התמונה לאורך ציר הX של האלמנט (לרוחב הדף). 
  
• repeat-y - תכפיל את התמונה לאורך ציר הY של האלמנט (לאורך הדף). 
  
• no-repeat - לא תכפיל את התמונה. 
  

השורה הבאה תיצור טור אדום לצידו הימני של המסך:

---

body{background-image: url(images/red.gif);  

background-position:rightright top;  

background-repeat:repeat-y;}

---

Value	Description
repeat	Default. The background image will be repeated vertically and horizontally
repeat-x	The background image will be repeated horizontally
repeat-y	The background image will be repeated vertically
no-repeat	The background-image will be displayed only once

► הקודם  הבא  ◄

7.5 background-position

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

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

---

Table{background-position: 20px 50px;}

---

במקרה זה ימקם הדפדפן את התמונה עשרים פיקסלים משמאל וחמישים מלמעלה. אפשר גם באחוזים:

---

Table{background-position: 33% 20%;}

---

אבל אפשר גם במילים. לאופקי משתמשים ב:left, right, center ולאנכי ב: top, center, bottom.

---

td{background-position: center middle;}

---

Value	Description
top left top center top right center left center center center right bottom left bottom center bottom right	If you only specify one keyword, the second value will be "center". Default value: 0% 0%
x% y%	The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%.
xpos ypos	The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions.

► הקודם  הבא  ◄

7.6 Background-attachment

Background-attachment היא תכונה הפועלת רק עם אקספלורר ומאפשרת למקם את תמונת הרקע כקבועה (fixed) או נעה (scroll) בגלילה.

---

body {background-image: url(stars.gif); background-attachment: fixed}

---

Value	Description
scroll	Default. The background image moves when the rest of the page scrolls
fixed	The background image does not move when the rest of the page scrolls

► הקודם  הבא  ◄