Fonun yerləşdirilməsi

2.1 background-position xassəsi

background-position xassəsi CSS-də elementin daxilində fon şəklinin başlanğıc mövqeyini təyin etmək üçün istifadə olunur. Bu xassə fon görüntüsünün element daxilində harada yerləşəcəyini dəqiq müəyyən etməyə imkan verir. background-position fon şəkillərinin göstərilməsini incə tənzimləmək və daha mürəkkəb dizaynlar yaratmaq üçün istifadə oluna bilər.

background-position xassəsinin sintaksisi

background-position xassəsi iki dəyər qəbul edir, bu dəyərlər fon şəklinin üfüqi və şaquli mövqelərini göstərir:

    
      background-position: üfüqi-mövqe şaquli-mövqe;
    
  

Əgər yalnız bir dəyər göstərilibsə, o zaman ikinci dəyər varsayılan olaraq center qəbul edilir.

Üfüqi və şaquli mövqelərin hansı dəyərlər ola biləcəyinə baxaq:

• Açar sözlər:
  • left: sol kənara uyğunlaşdırma
  • center: mərkəzə uyğunlaşdırma
  • right: sağ kənara uyğunlaşdırma
  • top: yuxarı kənara uyğunlaşdırma
  • bottom: aşağı kənara uyğunlaşdırma
• Faiz dəyərləri:
  • Məsələn, 50% 50% şəkili mərkəzə yerləşdirir
  • Faiz dəyərləri elementin ölçülərinə aiddir, şəklin öz ölçülərinə yox
• Piksel dəyərləri:
  • Məsələn, 10px 20px şəkli sol kənardan 10 piksel, yuxarı kənardan isə 20 piksel uzaqda yerləşdirir
• Dəyər kombinasiyaları:
  • Açar sözlər və faiz dəyərlərini birləşdirmək olar, məsələn, left 50%

2.2 Açar sözlər

Açar sözlər:

• left, center, right: üfüqi hizalanma
• top, center, bottom: şaquli hizalanma

Açar sözlərdən istifadə nümunələri

Şəkil yuxarı sol küncdə yerləşdirilir:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: left top;  /* Şəkil yuxarı sol küncdə yerləşdirilir */
      }
    
  

Şəkil mərkəzdə yerləşdirilir:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: center center;  /* Şəkil mərkəzdə yerləşdirilir */
      }
    
  

Şəkil aşağı sağ küncdə yerləşdirilir:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: right bottom;  /* Şəkil aşağı sağ küncdə yerləşdirilir */
      }
    
  

2.3 Faizlər

Faizlərdəki qiymətlər şəklin elementin ölçülərinə nisbətən olan mövqeyini göstərir.

Faizlərdən istifadə nümunələri

Şəkil mərkəzə yerləşdirilir:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 50% 50%;  /* Şəkil mərkəzə yerləşdirilib */
      }
    
  

Şəkil yuxarı sol küncə yerləşdirilir:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 0% 0%;  /* Şəkil yuxarı sol küncə yerləşdirilib */
      }
    
  

Şəkil aşağı sağ küncə yerləşdirilir:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 100% 100%;  /* Şəkil aşağı sağ küncə yerləşdirilib */
      }
    
  

2.4 Mütləq ölçü vahidləri (px, em, rem)

Pixel və ya digər mütləq vahidlərdəki dəyərlər şəkilləri dəqiq mövqeləndirməyə imkan verir.

Şəkil mərkəzdə mövqeləndirilir:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 10px 20px;  /* Şəkil sol üst küncdən 10 pixel sağa və 20 pixel aşağı mövqeləndirilir */
      }

      div {
        background-image: url('path/to/image.jpg');
        background-position: 2em 3em;  /* Şəkil 2em sağa və 3em aşağı mövqeləndirilir */
      }
    
  

2.5 Dəyərlərin Kombinasiyası

Daha dəqiq pozisyonlaşdırma yaratmaq üçün açar sözləri və mütləq vahidləri kombinə edə bilərsiniz.

Dəyərlərin Kombinasiyası:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: left 20px top 10px;  /* Şəkil yuxarı sol küncdən 20 piksel sağa və 10 piksel aşağıya pozisyonlaşdırılır */
      }