Как позиционировать фон css
Перейти к содержимому

Как позиционировать фон css

  • автор:

CSS свойство background-position

Задает начальное положение фонового изображения в пределах содержащего его элемента. Значение может быть как одиночным (например, top), так и двойным (например, top right).

По умолчанию фоновое изображение располагается в верхнем левом углу элемента и повторяется по горизонтали и вертикали.

CSS синтаксис

background-position: значение;

Возможные значения
Значение Описание
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
Если используется одно ключевое слово, то вторым по умолчанию будет «center»
x% y% Первое значение — позиция по горизонтали, второе — по вертикали. Верхий левый угол имеет позицию 0% 0%. Нижний правый угол — 100% 100%. Если задается одно значение, то второе по умолчанию будет 50%. Значение по умолчанию: 0% 0%.
xpos ypos Первое значение — позиция по горизонтали, второе — по вертикали. Верхий левый угол имеет позицию 0 0. В качестве значений можно использовать пиксели (0px 0px), либо любые другие единицы измерения, допустимые в CSS. Если задается одно значение, то второе по умолчанию будет 50%. Допустимо совместное использование % и единиц расстояния.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.
Пример использования

Пример №1

Позиционирование фонового изображения

 body

Пример №2

Позиционирование фонового изображения при помощи процентов

 body

Пример №3

Позиционирование фонового изображения при помощи пиксельных отступов

Позиционирование фона от нижнего правого угла элемента

При вёрстке шаблонов сайтов нередко возникает необходимость позиционировать фоновое изображение с отступом от правого или нижнего края HTML-элемента. Долгое время для этого приходилось встраивать пустое пространство соответствующего размера непосредственно в изображение, поскольку в CSS такой возможности не было. Это приводило к снижению гибкости (для изменения отступа необходимо пересохранять изображение) и увеличивало размер файла и потребление памяти в браузере.

Ситуация меняется благодаря модулю CSS3 «Backgrounds and Borders», относительно недавно перешедшему в статус Candidate Recommendation. Предусмотренный в нём обновлённый синтаксис CSS-свойства background-position позволяет задать произвольные отступы от нижнего и/или правого краёв элемента:

background-position: bottom 10px right 20px;

В приведённом примере изображение будет привязано к правому нижнему углу элемента и при этом будет отстоять на 10 и 20 точек от нижнего и правого краёв элемента, соответственно.

Формальное описание нового синтаксиса в спецификации:

Если указаны 3 или 4 значения, то каждое числовое значение соответствует отступу и должно следовать после ключевого слова, определяющего, отступ от какой из сторон элемента задаётся. Если указаны 3 значения, то отсутствующее значение отступа принимается равным нулю.

В настоящее время CSS3-синтаксис background-position уже поддерживается в Opera 11+ и IE9+. В Firefox возможность станет доступной начиная с версии 13, выход которой ожидается в начале июня. Для WebKit (Chrome, Safari) существует не принятый пока патч.

  • UModeL 2014-07-22 Надо же, половину Интернета «перегуглил», а нашёл только здесь. Даже в популярных и регулярно обновляющихся онлайн-справочниках не обнаружил, а статейка то давняя уже.
    Спасибо за инфу.
  • Sam 2014-09-17 Thanks for this I really needed this it works great as a replacement for a Jquery background-position issue I was having trying to animate this property. This still allows me to animate the container and by setting the position off the bottom it stays in the position I need it to.
  • ASD 2015-08-25 Wow! It’s cool! Thank you so much!
  • Платон2015-10-17 Полезная статья. Однако бы еще понять, как сделать просто отступ справа для фона. А это уже совершенно другой код. Вот задачка, к примеру, нужно чтобы фон справа был на 10 пикселей отступ при резиновости самого блока)
  • Marat Tanalin(автор)2015-10-17 Платон, если отступ от нижнего края (значение после ключевого слова bottom ) не нужен, его следует просто обнулить (или не задавать вовсе) и задать нужное значение только для отступа справа (значение после right ): background-position: bottom 0 right 10px; или background-position: bottom right 10px; Дополнил заметку.
  • css,
  • избранное,
  • фоновые изображения
  • Firefox 114
  • Firefox 113
  • Firefox 112
  • Firefox 111
  • Firefox 110
  • Как сделать кнопку ссылкой
  • Правильный DOCTYPE в HTML5
  • Сброс стилей в CSS
  • Отключение Caps Lock в Windows
  • Dell P2415Q. Авторский обзор 4K-монитора
  • Asus PQ22UC — 22″ OLED-монитор 4K
  • Dell UP3017Q — 30″ OLED-монитор 4K

Перепечатка любых материалов сайта в любом объёме запрещена

Добавление фонового изображения с отступом в CSS списке

Для распространения фонового изображения на область в пределах отступов в CSS используйте свойство background-clip . Значение border-box приведет к тому, что фон охватит и отступы:

Скопировать код

.my-element < background: url('image.jpg') no-repeat; padding: 20px; background-clip: border-box; /* Учитываем отступы! */ >

В противном случае, если вы предпочитаете оставить отступы вне зоны охвата, используйте значение content-box:

Скопировать код

.my-element < background: url('image.jpg') no-repeat; padding: 20px; background-clip: content-box; /* Отступы игнорируем! */ >

Свойство background-clip позволяет модифицировать фон с учётом специфических дизайнерских нужд.

Задание стартовой позиции фона

Функция background-origin дает возможность установить начальное положение фона:

Скопировать код

.my-element < background: url('image.jpg') no-repeat center center; padding: 20px; background-origin: content-box; /* Выбираем исходную точку */ >

Используя calc() вместе с background-position , можно достичь точного позиционирования фона:

Скопировать код

.my-element < background: url('image.jpg') no-repeat; padding: 20px; background-position: calc(100% – 20px) center; /* Позиционирование с максимальной точностью! */ >

Продвинутые техники: Списки, псевдоэлементы и воздействие при наведении

При стилизации списков с помощью ul или li псевдоэлементы расширяют возможности контроля над дизайном.

Скопировать код

ul li::before < content: url('bullet-image.jpg'); padding-right: 10px; /* Добавляем пространство между элементами списка */ >

Оформляйте уникальные интерактивные элементы с помощью селекторов наведения и применяйте свойство no-repeat , чтобы изображения не дублировались.

Скопировать код

ul li:hover::after < content: ""; background: url('hover-background.jpg') no-repeat; /* Фон при наведении — без повторов */ display: block; height: 100px; /* Улучшаем визуальное взаимодействие при наведении */ >

Учет размеров: Динамическая адаптивность

Для адаптации фонового изображения к различным размерам элемента используйте процентные значения:

Скопировать код

.my-element < background: url('image.jpg') no-repeat 50% 50%; /* Центрируем фон */ padding: 5%; /* Устанавливаем отступы */ >

Такой подход позволяет изображению приспосабливаться, создавая адаптивный дизайн.

Визуализация

Возьмите для примера слои одежды, создающие стильный образ. Содержимое — это футболка, отступы — подобны пиджаку, а фоновое изображение — этакий модный шарф.

Скопировать код

�� Содержимое: "Привет, мир!" �� Отступы: формиру[ ]ют пространство �� Фоновое изображение: Украшает пустую область

Эти элементы взаимодействуют между собой:

Скопировать код

Перед применением отступов: ��: "Привет, мир!" �� После применения отступов: [ ��: "Привет, мир!" ] ��

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

Скопировать код

.content < padding: 20px; /* �� Создаём пространство */ background-image: url(. ); /* �� Фон занимает область отступов */ >

Всё это создает эффект рамки в вашем макете.

Адаптивные изображения и красивые оверлеи

Сделайте фоновые изображения резиновыми, чтобы они соответствовали размерам отступов:

Скопировать код

.my-element < background: url('image.jpg') no-repeat; padding: 20px; background-size: cover; /* Изображение приспосабливается к размерам элемента */ >

Способность псевдоэлементов создавать эффект оверлея, аналогичный фильтрам в Instagram, значительно повышает уровень пользовательского взаимодействия:

Свойство background-position

Свойство background-position (от англ. «background position» ‒ «положение фона») определяет начальное положение каждого фонового изображения.

Применяется: в CSS 1‒2.0 к элементам блочного уровня и замещаемым элементам,
в CSS 3 ко всем элементам;
Наследование: отсутствует;
Проценты: в CSS 1 относительно размера самого элемента,
в CSS 2.0-2.2 относительно размера собственной коробки,
в CSS 3 относительно размера позиционирования области фона минус размер фонового изображения;
Медиа : визуальные.

Условия использования

  • Если фоновое изображение фиксируется относительно области просмотра, изображение помещается относительно области просмотра, а не области отступа элемента.
  • Начиная с CSS3 (через запятую) можно указать положение для каждого фонового изображения элемента.

JavaScript

[объект] .style .backgroundPosition =»[значение]»;

Поддержка браузерами

Спецификация

CSS Раздел
1 5.3.6 ‘background-position’ Перевод
2 14.2.1 Background properties.
‘background-position’
2.1 14.2.1 Background properties.
‘background-position’
2.2 14.2.1 Background properties.
background-position
3 3.6. Positioning Images: the ‘background-position’ property

Значения

В качестве значения свойства указывается смещение фонового изображения по горизонтали и по вертикали (например, значение « 100% 100% » помещает нижний правый угол изображения в нижний правый угол элемента). Если заданы значения как для вертикального, так и для горизонтального положения, то горизонтальное положение идёт первым. Если задано только одно значение, то оно устанавливает только горизонтальное положение (за исключением чисто вертикальных значений « bottom » и « top »), а вертикальное положение будет соответствовать значению «center».

Размеры участвующие в вычислении процентного значения расположения фонового элемента

Указывает в процентах смещение (по вертикали | по горизонтали) фонового изображения от левого верхнего угла коробки (точка отсчёта по умолчанию).

  • Процентное значение для горизонтального смещения вычисляется относительно разницы «ширины области позиционирования фона» и «ширины фонового изображения» [ x = (ew — iw) * ( / 100) ], где размер изображения равен размеру заданному свойством «background-size».
  • Процентное значение для вертикального смещения вычисляется относительно разницы «высоты области позиционирования фона» и «высоты фонового изображения» [ y = (eh — ih) * ( / 100) ], где размер изображения равен размеру заданному свойством «background-size».

К примеру, если свойству задана пара значений « 0% 0% », то верхний левый угол изображения совпадает с верхним левым углом отступа коробки. Пара значений « 100% 100% », присваиваемая свойству, помещает нижний правый угол изображения в нижний правый угол отступа коробки.

Пример смещения фонового изображения (в процентных значениях)

background-position: 50% 50% ;

Примечание: допускаются отрицательные значения процента.

Пример смещения фонового изображения (в значениях длины)

background-position: 25px 10px ;

Примечание: допускаются отрицательные значения длины.

bottom Если для вертикального положения задано одно значение, то вычисляется как « 100% ». Если для вертикального положения задано два значения, то «bottom» (который должен быть указан в качестве первого значения) определяет нижний край в качестве начала для следующего вертикального смещения (определяемого вторым значением).

Пример смещения фонового изображения (со значением bottom)

background-position: left bottom ;

Примечание: если «bottom» задан в качестве единственного значения свойства, то итоговое значение вычисляется как « 50% 100% ».

center Вычисляется как « 50% » (« left 50% ») для горизонтального положения, если не указано иное горизонтальное положение, или « 50% » (« top 50% ») для вертикального положения, если оно есть.

Пример смещения фонового изображения (со значением center)

Примечание: если «center» задан в качестве единственного значения свойства, то итоговое значение вычисляется как « 50% 50% ».

left Если для горизонтального положения задано одно значение, то вычисляется как « 0% ». Если для горизонтального положения задано два значения, то «left» (который должен быть указан в качестве первого значения) определяет левый край в качестве начала для следующего смещения (определяемого вторым значением).

Пример смещения фонового изображения (со значением left)

background-position: left center ;

Примечание: если «left» задан в качестве единственного значения свойства, то итоговое значение вычисляется как « 0% 50% ».

right Если для горизонтального положения задано одно значение, то вычисляется как « 100% ». Если для горизонтального положения задано два значения, то «right» (который должен быть указан в качестве первого значения) определяет правый край в качестве начала для следующего смещения (определяемого вторым значением).

Пример смещения фонового изображения (со значением right)

background-position: right 25% center ;

Примечание: если «right» задан в качестве единственного значения свойства, то итоговое значение вычисляется как « 100% 50% ».

top Если для вертикального положения задано одно значение, то вычисляется как « 0% ». Если для вертикального положения задано два значения, то «top» (который должен быть указан в качестве первого значения) определяет верхний край в качестве начала для следующего смещения (определяемого вторым значением).

Пример смещения фонового изображения (со значением top)

background-position: right 5% top 5px ;

Примечание: если «top» задан в качестве единственного значения свойства, то итоговое значение вычисляется как « 50% 0% ».

inherit Указывает, что элемент должен унаследовать параметры родительского элемента.

Начальное значение: « 0% 0% ».

Примечание: в CSS 1-2.0 ключевые слова нельзя использовать в сочетании с процентными значениями или значениями длины.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *