CSS+-+Позадина


 * Претходно: ** CSS - Како да...? ** Почеток: ** CSS Туторијал ** Следно: ** CSS - Текст

Својствата на позадината во CSS се користат за дефинирање на ефектите на позадината на елементот. Својства на CSS кои секористат за ефектите на позадината:
 * background-color
 * background-image
 * background-repeat
 * background-attachment
 * background-position

Боја на позадината
Својството background-color ја одредува бојата на позадината на елементот. Бојата на позадината на страницата е дефинирана во body селекторот:

body {background-color:#b0c4de;}

Со CSS, бојата е најчесто дефинирана со:
 * HEX вредност - „#ff0000“
 * RGB вредност - „rgb(255,0,0)“
 * име на бојата - „red“

Во примерот подолу,елементите h1, p и div имаат различна боја на позадината:

h1 {background-color:#6495ed;} p {background-color:#e0ffff;} div {background-color:#b0c4de;}



Позадинска слика
Својството background-image одредува слика која ќе се користи како позадина на елементот. Стандардно, сликата се повторува и го покрива целиот елемент. Позадинската слика за страницата може да биде поставена, пример:

body {background-image:url('paper.gif');}



Подолу е пример на лоша комбинација на текст и позадинска слика. Текстот е речиси нечитлив:

body {background-image:url('bgdesert.jpg');}



Позадинска слика - повторување хоризонтално или вертикално
Стандардно, својството за позадинска слика ја повторува сликата и хоризонтално и вертикално. Некои слики би требало да се повторат хоризонтално или вертикално, или тие ќе изгледаат чудно, пример:

body { background-image:url('gradient2.png'); }

Ако сликата се повторува само хоризонтално, позадината ќе изгледа подобро:

body { background-image:url('gradient2.png'); background-repeat:repeat-x; }

**Позадинска слика - Позиционирање и неповторување**

Покажување на сликата само еднаш е дефинирано со својството background-repeat:

body { background-image:url('img_tree.png'); background-repeat:no-repeat; }



Во примерот погоре, позадината е покажана на истото место како и текстот. Сакаме да ја смениме позицијата на сликата, така да сликата да не го нарушува текстот премногу. Позицијата на сликата е дефинирана со својството background-position:

body { background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; }



**Позадинска слика - својство стенографија**

Како што можете да виде од примерите погоре, постојат многу својства кои можете да ги земете во предвид за справување со позадините. За да го скратите кодот, исто така е можно да ги дефинирате сите својства само во едно. Ова се вика стенографско својство.

body {background:#ffffff url('img_tree.png') no-repeat right top;}



Кога се користи ова својство редоследот на вредностите е:
 * background-color
 * background-image
 * background-repeat
 * background-attachment
 * background-position

Не е важно ако едно од овие вредносто недостасува, се додека тие што се присутни се по овај редослед.

Сите својства за позадината

 * ** Својство ** || ** Опис ** ||
 * background || Ги поставува сите позадински својства во една декларација ||
 * background-attachment || Поставува дали позадината е фиксна или ќе се листа со остатокот од страницата ||
 * background-color || Ја поставува бојата на позадината на елементот ||
 * background-image || Ја поставува сликата на позадината на елементот ||
 * background-position || Ја поставува почетната позиција на сликата на позадината ||
 * background-repeat || Поставува како сликата на позадината ќе се повторува ||


 * Претходно: ** CSS - Како да...? ** Почеток: ** CSS Туторијал ** Следно: ** CSS - Текст