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

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 пикселей вниз от верхнего левого угла */
      }
    
  

1

Задача

Модуль 1: Web Core, 10 уровень, 1 лекция

Недоступна

Позиция фона

Позиция фона

Открыть

1

Задача

Модуль 1: Web Core, 10 уровень, 1 лекция

Недоступна

Позиция фона (пиксели)

Позиция фона (пиксели)

Открыть