Позиціонування фону

2.1 Властивість background-position

Властивість background-position у CSS використовується для завдання початкової позиції фонового зображення в елементі. Це властивість дозволяє точно визначити, де буде розміщено фонове зображення всередині елемента. background-position можна використовувати для тонкого налаштування відображення фонів і створення більш складних дизайнів.

Синтаксис background-position

Властивість background-position приймає два значення, які вказують на горизонтальну та вертикальну позиції фонового зображення:

    
      background-position: горизонтальна-позиція вертикальна-позиція;
    
  

Якщо задано лише одне значення, друге значення за замовчуванням вважається center.

Якими можуть бути значення горизонтальної та вертикальної позиції:

• Ключові слова:
  • left: вирівнювання по лівому краю
  • center: вирівнювання по центру
  • right: вирівнювання по правому краю
  • top: вирівнювання по верхньому краю
  • bottom: вирівнювання по нижньому краю
• Процентні значення:
  • Наприклад, 50% 50% позиціонує зображення в центрі
  • Процентні значення стосуються розмірів елемента, а не зображення
• Піксельні значення:
  • Наприклад, 10px 20px позиціонує зображення на 10 пікселів від лівого краю і 20 пікселів зверху
• Комбінації значень:
  • Можна комбінувати ключові слова і процентні значення, наприклад, left 50%

2.2 Ключові слова

Ключові слова:

• left, center, right: горизонтальне вирівнювання
• top, center, bottom: вертикальне вирівнювання

Приклади використання ключових слів

Зображення позиціонується у верхньому лівому куті:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: left top;  /* Зображення позиціонується у верхньому лівому куті */
      }
    
  

Зображення позиціонується по центру:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: center center;  /* Зображення позиціонується по центру */
      }
    
  

Зображення позиціонується у нижньому правому куті:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: right bottom;  /* Зображення позиціонується у нижньому правому куті */
      }
    
  

2.3 Відсотки

Значення у відсотках вказують на позицію зображення відносно розмірів елемента.

Приклади використання відсотків

Зображення позиціонується по центру:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 50% 50%;  /* Зображення позиціонується по центру */
      }
    
  

Зображення позиціонується у верхньому лівому куті:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 0% 0%;  /* Зображення позиціонується у верхньому лівому куті */
      }
    
  

Зображення позиціонується у нижньому правому куті:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 100% 100%;  /* Зображення позиціонується у нижньому правому куті */
      }
    
  

2.4 Абсолютні одиниці (px, em, rem)

Значення у пікселях чи інших абсолютних одиницях дозволяють точно позиціонувати зображення.

Зображення позиціонується по центру:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: 10px 20px;  /* Зображення позиціонується на 10 пікселів праворуч і 20 пікселів вниз від верхнього лівого кута */
      }

      div {
        background-image: url('path/to/image.jpg');
        background-position: 2em 3em;  /* Зображення позиціонується на 2em праворуч і 3em вниз */
      }
    
  

2.5 Комбінування значень

Ви можете комбінувати ключові слова та абсолютні одиниці для створення більш точного позиціонування.

Комбінування значень:

    
      div {
        background-image: url('path/to/image.jpg');
        background-position: left 20px top 10px;  /* Зображення позиціонується на 20 пікселів праворуч і 10 пікселів вниз від верхнього лівого кута */
      }