Със свойството фон (background) може да се задава фонов цвят, фоново изображение, както и да се управлява изгледа на този фон - повторение по хоризонтала или вертикала, позиция и поведение при скролиране на страницата.

Фонов цвят

Фонов цвят се задава със свойството background-color и стойности:

• transparent (прозрачен);
• име на цвят, напр. chocolate;
• RGB стойност - примерно rgb(120, 230, 180);
• HEX стойност - #FF7F50;

Например можем да зададем за заглавие h1 фонов цвят тюркоазено синьо по следния начин:

h1 {background-color: #40E0D0}

Фоново изображение

Страниците могат да бъдат разнообразени и с използване на подходящо фоново изображение. За да сложите снимка за фон на страницата, използвайте свойството background-image със стойност url и името на снимката:

body {background-image: url(smile.gif)}

Не забравяйте, че в интернет се използват три вида изображения: GIF, PNG, JPEG. Също така, внимавайте фоновото изображение да не вземе превес над текста - твърде ярки цветове може да затруднят четенето.

Повторение на фоново изображение

Голямо фоново изображене, което да покрива цялата страница рядко се използва -  това би направило страницата твърде тежка. Като резултат малко хора биха дочакали да се заредят няколкото мегабайта и вместо в предимство, фоновото изображение ще се окаже недостатък. Вместо цели снимки, често се използва хоризонтално и/или вертикално повторение на по-малки изображения. За целта се използва свойството background-repeat и някоя от следните стойности:

• repeat - повторение по хоризонтала и по вертикала до запълване на страницата
• repeat-x - повторение само по хоризонтала
• repeat-y - повторение само по вертикала
• no-repeat - без повторение

Позициониране на фоново изображение

Със свойството background-position имате контрол над мястото на страницата, където ще се появи фоновото изображение. Можете да избирате измежду следните стойности за позициониране на фоново изображение:

• две числови стойности - първата за разстояние от левия край на страницата, а втората - за разстояние от горния край, напр.
  
  body {background-position: 200px 20px}
   
• проценти (%) - аналогично на числовите стойности се използват две числа -проценти част от широчината и от височината на страницата
• left top - положение горе вляво, еквивалентно на 0% 0%
• center top - горе в средата, същия резултат има и 50% 0%
• right top - горе вдясно, може да се използва вместо 100% 0%
• left center - вляво по хоризонтала и в средата по вертикала (0% 50%)
• center center - точно в средата на страницата (50% 50%)
• right center - вдясно по хоризонтала и в средата по вертикала (100% 50%)
• left bottom - долу вляво (0% 100%)
• center bottom - долу в средата (50% 100%)
• right bottom - долу вдясно (100% 100%)

Фиксиране на фоново изображение

Можете да застопорите фоновото изображение, така че дори да превъртате страницата, то да си стои на едно и също място на екрана. Това фиксиране на фоново изображение се постига със следната команда:

background-attachement: fixed;

Съкратен запис на фоновите свойства

Изброените до тук фонови свойства може да се задават по съкратен начин, използвайки свойството background. Ето един пример, който задава фонов цвят (близък до оранжево), фоново изображение на име grass.gif, забрана за повторение на изображението, позициониране горе вдясно и фиксиране на изображението:

body {background: #F4A460 url(grass.gif) no-repeat right top fixed;}