background-position

Налаштування положення

У якості значення можна використовувати абсолютні (px) чи відносні (%) одиниці, і навіть ключові слова (top, bottom, right, left, center). За замовчуванням задане значення left для x і top для y, тобто фон позиціонується відносно верхнього лівого кута елемента.

/* Поставить фонове зображення по центру */
background-position: 50% 50%;
/* Поставить фонове зображення 100px від лівого краю та 200px від верху */
background-position: 100px 200px;
/* Поставить фонове зображення у нижній правий кут */
background-position: right bottom;
/* Поставить фонове зображення у верхній лівий кут */
background-position: left top;

Налаштування зміщення

Щоб не прив'язуватися до розмірів елемента та не задавати позицію фону жорстко, можна використовувати синтаксис позиції зі зміщенням.

/* Поставить фонове зображення по центру */
background-position: 50% 50%;
/* Поставить фонове зображення 100px від лівого краю та 200px від верху */
background-position: 100px 200px;
/* Поставить фонове зображення у нижній правий кут */
background-position: right bottom;
/* Поставить фонове зображення у верхній лівий кут */
background-position: left top;