background-position

При помощи свойства background-position можно управлять положением фоновой картинки внутри элемента.

Если фоновая картинка (background-image) меньше, чем элемент, и автоматическое повторение фона (background-repeat) отключено, то по умолчанию она расположится в левом верхнем углу.

        
          
          <div class="element"></div>
          <div class="element"></div>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          .element {  background-color: #49a16c;  background-image: url("doggo.png");  background-repeat: no-repeat;}
          .element {
  background-color: #49a16c;
  background-image: url("doggo.png");
  background-repeat: no-repeat;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Как видно в примере, маленькая картинка с персонажем располагается в левом верхнем углу. Но по логике это изображение нам нужно расположить в правом нижнем углу.

Для этого мы изменим значение свойства background-position на нужное нам: 100% 100% или bottom right. Они равнозначны.

Позиция в процентах:

        
          
          .element {  background-position: 100% 100%;}
          .element {
  background-position: 100% 100%;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Или при помощи ключевых слов:

        
          
          .element {  background-position: bottom right;}
          .element {
  background-position: bottom right;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Доступны слова center, bottom, left, right. Их можно комбинировать, например: left center — по центру левой стороны; right bottom — правый нижний угол. Если хотим расположить картинку по центру по горизонтали и вертикали, второе слово center можно опустить.

Левый верхний угол:

        
          
          .element {  background-position: left top;}
          .element {
  background-position: left top;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Центр-центр:

        
          
          .element {  background-position: center;}
          .element {
  background-position: center;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

По центру по горизонтали и у нижнего края:

        
          
          .element {  background-position: center bottom;}
          .element {
  background-position: center bottom;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Можно указать конкретное положение картинки в блоке.

10 px от левого края и 150 px от верхнего края:

        
          
          .element {  background-position: 10px 150px;}
          .element {
  background-position: 10px 150px;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

1 rem от левого края и по центру между верхом и низом:

        
          
          .element {  background-position: 1rem;}
          .element {
  background-position: 1rem;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

15 единиц ширины от левого края и 25 единиц высоты от верха:

        
          
          .element {  background-position: 15vw 25vh;}
          .element {
  background-position: 15vw 25vh;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Для этого свойства проценты рассчитываются необычным для CSS образом: от разницы между размером элемента и размером самой фоновой картинки. Сдвиг картинки на 50%, то есть на половину этой разницы, центрирует её по соответствующей оси. Значение 0% 0% ставит картинку в левый верхний угол, а 100% 100% — в правый нижний.

Правый нижний угол:

        
          
          .element {  background-position: 100% 100%;}
          .element {
  background-position: 100% 100%;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Центр-центр:

        
          
          .element {  background-position: 50% 50%;}
          .element {
  background-position: 50% 50%;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Слева 15%, сверху 5%:

        
          
          .element {  background-position: 15% 5%;}
          .element {
  background-position: 15% 5%;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Если развернуть запись 15% 5% подробнее, то станет понятнее, как работают проценты в этом случае:

• Слева от картинки 15% свободного места, а справа — оставшиеся 85%.
• Над картинкой 5% свободного места, а под ней — оставшиеся 95%.

💡 Свойство положения фона не наследуется.

💡 Ключевые слова можно указывать в любом порядке. В остальных случаях первая величина — это позиция по горизонтали, а вторая, если есть — по вертикали.

💡 Значение по умолчанию — 0% 0% (левый верхний угол).

💡 Если указано только одно значение, то второе подставляется автоматически и равняется 50%. То есть значение 100% расположит картинку по центру правого края.

💡 Если картинка больше блока, то разница их размеров, от которой отсчитываются проценты, оказывается отрицательной, поэтому они сдвигают картинку не вправо и вниз, а влево и вверх. Но 50% 50% и в этом случае совмещает центр картинки с центром элемента, а 100% 100% — правый нижний угол картинки с правым нижним углом элемента.

💡 Если картинка занимает всё пространство блока, то background-position с ключевыми словами или в процентах не возымеет никакого действия (проценты будут отсчитываться от нуля). Но его принято указывать, чтобы в случае замены картинки новое изображение располагалось по центру блока.

💡 Изменение положения фона можно анимировать при помощи свойства transition 🥳

На практике

Скопировать ссылку "На практике" Скопировано

Алёна Батицкая советует

Скопировать ссылку "Алёна Батицкая советует" Скопировано

🛠 В работе редко требуется располагать маленькие фоновые картинки в больших блоках. Сейчас принято делать красивые фоны на всю ширину. Но для любых фонов стоит указывать background-position: center или background-position: 50% 50% — в качестве подстраховки от фатальной поломки вёрстки.

🛠 Можно встретить такую запись: background-position: right 20px bottom 10px;. В этом случае отступ будет отсчитываться не от верхнего левого угла, а от указанной при помощи ключевого слова стороны. В данном случае картинка будет расположена в двадцати пикселях от правого края и в десяти пикселях от нижнего края.

🛠 Помимо перечисленных вариантов можно использовать функцию calc() для указания более гибкого значения.

+ Развернуть