АКЦИЯ: бесплатные месячные курсы по созданию сайтов
на выбор: верстка, JavaScript, PHP, Python или фреймворки. Сегодня последний день для записи! Жми!
74 of 313 menu
Бесплатный курс по выкладке сайтов на хостинг. Разбираем все нюансы! Начало 14 октября. Жми для записи!

Свойство background-position

Свойство background-position задает местоположение фоновой картинки элемента. Местоположение можно задавать с помощью любых единиц для размеров. Первое значение обозначает отступ слева, второе - отступ сверху.

Можно также задавать положение ключевыми словами. В этом случае порядок значений не важен. Ключевые слова для вертикали: top, center, bottom. Ключевые слова по горизонтали: left, center, right.

Как пользоваться ключевыми словами

Чтобы разместить картинку ключевым словом, нужно указать одно значение для вертикали и одно для горизонтали. К примеру, если указать значение top right, то картинка станет сверху справа.

Порядок слов неважен: можно написать top right, а можно - right top. Если есть ключевое слово center - его можно опускать. Например, top center, все равно что просто top. А center center все равно что просто center.

Синтаксис

селектор { background-position: два значения через пробел; }

Пример

По умолчанию фоновая картинка будет в верхнем левом углу:

<div id="elem"></div> #elem { background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }

:

Пример

Давайте разместим фоновую картинку в верхний правый угол:

<div id="elem"></div> #elem { background-position: top right; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }

:

Пример

Давайте разместим фоновую картинку в нижний правый угол:

<div id="elem"></div> #elem { background-position: bottom right; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }

:

Пример

Давайте разместим фоновую картинку справа и по центру по вертикали:

<div id="elem"></div> #elem { background-position: right center; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }

:

Пример

Давайте разместим фоновую картинку по центру блока:

<div id="elem"></div> #elem { background-position: center center; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }

:

Пример

Давайте разместим фоновую картинку на расстоянии 20px слева и 40px сверху:

<div id="elem"></div> #elem { background-position: 20px 40px; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }

:

Пример

Давайте разместим фоновую картинку на расстоянии 90% слева и 100% сверху:

<div id="elem"></div> #elem { background-position: 90% 100%; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }

:

Пример

Давайте разместим фоновую картинку на расстоянии 30px слева и по снизу по вертикали:

<div id="elem"></div> #elem { background-position: 30px bottom; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }

:

Пример

Давайте разместим фоновую картинку на расстоянии 30px слева и по центру по вертикали:

<div id="elem"></div> #elem { background-position: 30px center; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }

:

Пример

Давайте разместим фоновую картинку на расстоянии 30px сверху и по центру по горизонтали:

<div id="elem"></div> #elem { background-position: center 30px; background-image: url("bg.png"); background-repeat: no-repeat; width: 400px; height: 300px; border: 1px solid black; }

:

Смотрите также

  • свойство background,
    представляющее собой свойство-сокращение для фона
byenru