CSS Background (arxa fon) Xüsusiyyətləri

Background aşağıdakı şəkildə göründüyü kimi padding və mətn sahəsini əhatə edir.
 


Background xüsusiyyətləri ilə elementlərə rəng təyin etməklə yanaşı, background-image xüsusiyyəti ilə HTML-a başqa əlavələr də edilə bilər.

Background xüsusiyyətlərini bir-bir araşdıraq:

background-image
background-repeat
background-attachment
background-position
background


background-color
Elementlərin fonuna rəng təyin etmək üçün istifadə edilir.
Quruluşu: background-color:<dəyər>
Aldığı dəyərlər: rəng | transparent
Başlanğıc dəyəri: transparent
Tətbiq oluna bilən elementlər: bütün elementlər
İrsilik: yoxdur
Nümunə
body {
background-image: url(/images/yoxlama.gif)
}
 
background-repeat
background-repeat xüsusiyyəti background-image ilə fona əlavə olunan şəklin təkrarlanmasını təyin edir.
Quruluşu: background-repeat:<dəyər>
Aldığı dəyərlər: repeat | repeat-x | repeat-y | no-repeat
Başlanğıc dəyəri: repeat
Tətbiq oluna bilən elementlər: bütün elementlər
İrsilik: yoxdur
Nümunə
body {
background: white url(yoxlama.gif);
background-repeat: repeat-x;
}

background-attachment
background-attachment xüsusiyyəti fona əlavə olunan şəklin səhifə ilə birlikdə sürüşməsini (scroll) və ya fonun səhifədə sabit qalmasını təmin edir.
Quruluşu: background-attachment: <dəyər>
Aldığı dəyərlər: scroll | fixed
Başlanğıc dəyəri: scroll
Tətbiq oluna bilən elementlər: bütün elementlər
İrsilik: yoxdur
Nümunə
body {
background: white url(yoxlama.gif);
background-attachment: fixed;
}
 
background-position
background-position xüsusiyyəti background-image ilə təyin olunan şəklin başlanğıc nöqtəsini (yerini) təyin edir. Bu xüsusiyyət yalnız block-level və replaced (Bu elementlər özünə xas ölçüləri olan elementlər olaraq təyin oluna bilər. Məs: IMG, INPUT, TEXTAREA, SELECT, və OBJECT) elementlərə tətbiq olunur.
Quruluşu: background-position: <dəyər>
Aldığı dəyərlər: [top | center | bottom] || [left | center | right]
Başlanğıc dəyəri: 0% 0%
Tətbiq oluna bilən elementlər: Block-level ve replaced elementler
İrsilik: yoxdur
Ən asan istifadə forması - Üfüqi dəyərlər üçün: left,center,right; Şaquli dəyərlər üçün: top, center, bottom

Faiz dəyərləri və uzunluq dəyərləri də istifadə edilə bilər. Faiz dəyərləri elementin ölçüsü ilə bağlı olaraq nisbidir. Uzunluq dəyərləri isə fərqli ekran ölçülərində fərqli görünüşlərə səbəb olmasına görə çox da məsləhət görülmür.

Faiz və uzunluq dəyərləri verildiyində ilk dəyər üfüqi üçün, sonra gələn isə şaquli üçündür. Məsələn 10% 60% dəyəri bir fon şəklinə verilibsə 10% üfüqi, 60% isə şaquli dəyəri göstərir. 5px 10px kimi dəyərlər verilibsə şəklin sol üstdən 5px sağa və 10px aşağıdan başlayacağını təyin edir.

Əgər təkcə üfüqi dəyər verilmişsə, şaquli dəyər 50% olaraq qəbul ediləcək. Faiz və uzunluq dəyərləri mənfi qiymətlər ala bilər. Məs: -2px %10 kimi. Aşağıdakı nümunələr ümumi istifadə üçün faydalıdır:

top left = left top = 0% 0%
top = top center = center top = 50% 0%
right top = top right = 100% 0%
left = left center = center left = 0% 50%
center = center center = 50% 50%
right = right center = center right = 100% 50%
bottom left = left bottom = 0% 100%
bottom = bottom center = center bottom = 50% 100%
bottom right = right bottom = 100% 100%
 
Nümunə:
body {
background-image: url(yoxlama.gif);
background-repeat: no-repeat;
background-position: center;
}
 
background
Bu xüsusiyyət fon ilə əlaqədar bütün xüsusiyyətlərin bir yerdə istifadəsi olunmasına yarayır.
Quruluşu: background: <dəyər>
Aldığı dəyərlər: <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position>
Başlanğıc dəyəri: yoxdur
Tətbiq oluna bilən elementlər: bütün elementlər
İrsilik: yoxdur
Nümunə
body{
background: white url(yoxlama.gif)
}

blockquote {
background: #f00
}

p {
background: url(../images/yoxlama.png) #f00 fixed
}

table{
background: #0c0 url(yoxlama.jpg) no-repeat bottom right
}
CSS3