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

שינוי מאפיין הצבע נעשה בגוף הדף (body):

הגדרנו את צבע הרקע של הbody כאפור כך שהרקע של כל הדף יהיה באפור.
שימו לב שהגדרנו את הצבע במילים אך באותה מידה יכולנו להגדיר את הצבע בפורמט הקסדצימלי (למשל: e0ffff# ).

במדריך הקודם (מדריך מספר 5) יש פירוט לגביי צבעים.

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

The body background color is green.

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

בואו נניח שאנחנו רוצים לעשות פרסומת להוואי, מה יהיה יותר טוב מלהראות תמונה של החוף?

בכדי לתת אווירה, ניקח תמונה של החוף ונעשה כך:

Come to Hawaii

It's fun here!

בכדי להגדיר תמונת רקע לכל הדף, נציב אותה בbody בעזרת background-image ונגדיר url להיכן שהתמונה נמצאת (אם התמונה נמצאת בספריה של קובץ הCSS אז אין צורך לרשום נתיב).

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

בואו ננסה תמונה אחרת, שתיתן לדף מראה יותר יפה ונוריד את השכפול של התמונה בעזרת no-repeat:

Come to hawaii!

We have some nice beaches here!

השורה background-repeat:no-repeat מונעת שכפול של תמונת הרקע בbody.

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

Come to hawaii!

We have some nice beaches here!

כבר נראה יותר טוב, לא?

הוספנו את השורה background-position:right top בכדי להזיז את תמונת הרקע למעלה וימינה (בתוך הסוגריים המסולסלים של הbody).

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

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