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 ( ) для указания более гибкого значения.
Как развернуть картинку в css
Для поворота изображения применяется свойство transform с функцией rotate(), внутри которой указываем угол поворота. Таким образом достаточно выбрать селектором элемент и применить свойство.
img transform: rotate(180deg); >Как применить трансформацию CSS3 к фоновым картинкам
Масштабирование, наклон и поворот любого элемента возможен с помощью свойства CSS3 transform . Оно поддерживается всеми современными браузерами (с префиксами) и допускает изящную деградацию, к примеру:
#myelement
Хорошая штука. Однако вращается элемент целиком — его содержимое, границы и фоновая картинка. Что делать, если вы желаете повернуть только фоновое изображение? Или чтобы фон остался на месте, а элемент поворачивался?
В настоящее время у W3C нет предложений по трансформации фонового изображения. Это было бы невероятно полезно, поэтому подозреваю, нечто появится в конце концов, но не поможет разработчикам, которые хотят использовать подобные эффекты сегодня.
К счастью, есть решение. В сущности, это хак, который добавляет фоновое изображение к псевдоэлементу :before или :after , а не к родительскому контейнеру. Псевдоэлемент может трансформироваться независимо.
Трансформация только фона
У контейнера может не быть никаких стилей, но необходимо задать position: relative , поскольку наш псевдоэлемент располагается внутри. Также установите overflow: hidden , в противном случае фон будет выходить за пределы контейнера.
#myelement
Теперь мы можем создать абсолютно позиционированный псевдоэлемент с трансформируемым фоном. Свойство z-index задаём как -1, это гарантирует что фон появится под содержимым контейнера.
#myelement:before
Обратите внимание, что вам, возможно, потребуется настроить ширину псевдоэлемента, его высоту и положение. К примеру, если вы используете повторяющееся изображение, область поворота должна быть больше самого контейнера, чтобы полностью вместить фон.
Фиксация фона у трансформируемых элементов
Любые трансформации родительского контейнера применяются и к псевдоэлементам. Так что нам надо отменить трансформацию, например, если контейнер поворачивается на 30 градусов, фон должен повернуться на -30 градусов, чтобы он оказался в фиксированном положении:
#myelement < position: relative; overflow: hidden; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); >#myelement:before
Опять же, необходимо настроить размер и положение чтобы фон адекватно вписывался в родительский контейнер.
Пожалуйста, посмотрите демонстрационную страницу для примера. Полный код хранится внутри HTML.
Эффект работает в IE9, Firefox, Chrome, Safari и Opera. IE8 не покажет никаких трансформаций, но фон появится.
IE6 и 7 не поддерживает псевдоэлементы, поэтому фон исчезнет. Однако, если вы хотите поддерживать эти браузеры, можно добавить фоновое изображение к контейнеру, а затем установить его как none с помощью современных селекторов или через условные комментарии.
Как применить CSS3 преобразования к фоновым изображениям
CSS-преобразования хороши, но они (пока?) Не применяются к фоновым изображениям. В этой статье представлен обходной путь для тех случаев, когда вы действительно хотите повернуть фоновое изображение или оставить фиксированное фоновое изображение во время вращения его элемента контейнера.
Эта статья была обновлена в 2020 году .
Масштабирование, наклон и вращение любого элемента возможно с помощью свойства transform CSS3. Он поддерживается во всех современных браузерах без префиксов поставщиков.
#myelement transform: rotate(30deg); >Отличный материал. Тем не менее, это вращает весь элемент — его содержимое, границы и фоновое изображение. Что если вы хотите повернуть только фоновое изображение? Или что, если вы хотите, чтобы фон оставался фиксированным во время вращения контента?
Там нет предложения W3C CSS для преобразования background-image Это было бы невероятно полезно, так что, возможно, однажды появится, но это не поможет разработчикам, которые хотят использовать подобные эффекты сегодня.
Один из вариантов — создать новое фоновое изображение из оригинала, скажем, повернутое на 45 градусов. Это может быть достигнуто с помощью:
- процесс манипулирования изображениями на стороне сервера
- клиентский код обработки изображений на основе canvas или
- API, предоставляемые некоторыми сервисами CDN для хостинга изображений.
Но все это требует дополнительных усилий, обработки и затрат.
К счастью, есть решение на основе CSS. По сути, это хак, который применяет фоновое изображение к псевдоэлементу ::before ::after Псевдоэлемент может быть преобразован независимо от содержимого.
Преобразование только фона
К элементу контейнера могут быть применены любые стили, но он должен быть установлен в position: relative Вам также следует установить overflow: hidden
#myelement position: relative; overflow: hidden; >Теперь мы можем создать абсолютно позиционированный псевдоэлемент с преобразованным фоном. Для z-index -1
#myelement::before content: ""; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: -1; background: url(background.png) 0 0 repeat; transform: rotate(30deg); >Обратите внимание, что вам может потребоваться настроить ширину, высоту и положение псевдоэлемента. Например, если вы используете повторное изображение, повернутая область должна быть больше, чем ее контейнер, чтобы полностью покрыть фон.
Исправление фона на преобразованном элементе
Все преобразования в родительском контейнере применяются к псевдоэлементам. Поэтому нам нужно отменить это преобразование. Например, если контейнер повернут на 30 градусов, фон должен быть повернут на -30 градусов, чтобы вернуться в исходное положение:
#myelement position: relative; overflow: hidden; transform: rotate(30deg); > #myelement::before content: ""; position: absolute; width: 200%; height: 200%; top: -50%; left: -50%; z-index: -1; background: url(background.png) 0 0 repeat; transform: rotate(-30deg); >Опять же, вам нужно настроить размер и положение, чтобы фон адекватно покрывал родительский контейнер.
Вот соответствующие демонстрации в прямом эфире на CodePen:
Эффекты работают во всех основных браузерах и Internet Explorer до версии 9. Старые браузеры вряд ли будут показывать преобразования, но фон все равно должен появиться.