Как сдвинуть background image css
Для определения позиции изображения относительно родительского блока, используется свойство background-position. У данного свойства есть два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Вместо использования ключевых слов, положение можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.
- top left = left top = 0% 0% (в левом верхнем углу)
- top = top center = center top = 50% 0% (по центру вверху)
- left = left center = center left = 0% 50% (по левому краю и по центру)
- bottom right = right bottom = 100% 100% (в правом нижнем углу)
body /* путь до изображения*/ background-image: url(path_to_my_image.jpeg), /* позиционирование */ background-position: right bottom; > Как опустить картинку вниз css
Если вы хотите опустить картинку вниз на странице, можно использовать свойство CSS margin-top для задания отступа сверху. Например, если вы хотите опустить картинку на 20 пикселей, вы можете добавить следующее правило в свой CSS файл:
img margin-top: 20px; > Если вы хотите опустить картинку относительно ее родительского элемента, можно использовать позиционирование элементов в CSS. Например, если вы хотите опустить картинку на 20 пикселей относительно ее родительского блока, вы можете использовать следующее правило:
.parent position: relative; > img position: absolute; top: 20px; > Здесь мы сначала устанавливаем position: relative для родительского элемента, чтобы дочерние элементы могли быть спозиционированы относительно него. Затем мы устанавливаем position: absolute для картинки, чтобы она была спозиционирована относительно родительского блока, а не относительно других элементов на странице. Затем мы используем свойство top для задания отступа сверху от родительского блока.
Свойство 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
Фоновая картинка подчиняется этому свойству и занимает нужную позицию.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
- Кратко
- Пример
- Как пишется
- Ключевые слова
- Пиксели или другие единицы измерения длины
- Проценты
- Алёна Батицкая советует
Контрибьюторы:
Обновлено 20 декабря 2021
Кратко
Скопировать ссылку «Кратко» Скопировано
При помощи свойства background — position можно управлять положением фоновой картинки внутри элемента.
Если фоновая картинка ( background — image ) меньше, чем элемент, и автоматическое повторение фона ( background — repeat ) отключено, то по умолчанию она расположится в левом верхнем углу.
Пример
Скопировать ссылку «Пример» Скопировано
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 ( ) для указания более гибкого значения.