Background image по центру: background-position

Содержание

позиция фона — учебник CSS

Свойство background-position позволяет указывать начальную позицию фонового рисунка сразу для двух осей — x и y. Впрочем, можно воспользоваться и отдельными свойствами для каждой оси — background-position-x и background-position-y.

Значения background-position

В качестве значений могут выступать как специальные ключевые слова, так и числовые значения в единицах измерения CSS — процентах, пикселях и т. д.

Ключевые слова для горизонтального позиционирования

left — фоновый рисунок прилеплен к левой стороне элемента;
center — фоновый рисунок расположен в центре оси x;
right — фоновый рисунок прилеплен к правой стороне элемента.


div {
	background-position-x: left;
}

Ключевые слова для вертикального позиционирования

top — фоновый рисунок прилеплен к верхней стороне элемента;
center — фоновый рисунок расположен в центре оси y;
bottom — фоновый рисунок прилеплен к нижней стороне элемента.


div {
	background-position-y: bottom;
}

Сокращенная запись для двух осей

Часто позиционирование фона задается сразу для двух осей. Для этого удобно пользоваться сокращенной записью, т. е. свойством background-position. Оно принимает одно либо два значения (для позиционирования сразу по двум осям либо по каждой отдельно соответственно).

Ниже — различные примеры позиционирования фона с помощью ключевых слов:


background-position: top center; /* фон вверху по центру */
background-position: top right; /* фон в верхнем правом углу */
background-position: bottom left; /* фон в левом нижнем углу */
background-position: center right; /* фон справа по центру */

Значения можно менять местами — они будут работать так же.

Примеры выравнивания фона с помощью background-position

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

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


background-position: center; /* фон по центру */
background-position: left; /* фон слева по центру */
background-position: right; /* фон справа по центру */
background-position: top; /* фон вверху по центру */
background-position: bottom; /* фон внизу по центру */

Точные значения в единицах измерения CSS

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


div {
background-position: 10px 25px;
}

Такая запись означает, что фон удален от левого края на 10 пикселей и от верхнего края на 25 пикселей. Здесь важен порядок записи значений: первое значение отвечает за положение фонового рисунка по горизонтали, второе — по вертикали. Допустимы и отрицательные значения (например, они могут быть полезны в случае, если с левой или верхней стороны фоновой картинки есть область, которую необходимо спрятать).

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


div {
background-position: right 15px bottom 40px;
}

Здесь ключевые слова right и bottom говорят браузеру, что вы хотите делать отсчет от правой и нижней стороны. Следом за каждым из ключевых слов записывается желаемое значение. Так, 15px — это расстояние между фоном и правой стороной элемента, а 40px — расстояние между фоном и нижней стороной элемента.

Процентные значения

Большое удобство предоставляет возможность записи значений в процентах. Расстояние вычисляется, исходя из размеров элемента с заданным фоном. Допустимы отрицательные процентные значения, но результат здесь может быть неожиданным.

Лучший способ понять, как перемещается фон под управлением процентных значений — это попрактиковаться. А пока что покажем несколько примеров позиционирования фона через проценты:

Обратите внимание: значение 50% идеально центрирует фоновое изображение (как по вертикали, так и по горизонтали), поскольку точка центра устанавливается в середине фона, а не в его начале или конце.

Комбинирование значений

Да, вы можете записывать для каждой из осей свое значение в необходимых единицах измерения (либо используя ключевое слово). Комбинируйте точные значения с относительными, ключевые слова со значениями в единицах измерения — полная свобода действий. Примеры:

Важно: фоновые изображения и печать

Как правило, при печати страницы фоновые изображения не отображаются. Учитывайте это при работе с важной графикой — например, логотип компании, карту проезда и другие иллюстрации, содержащие важную информацию, рекомендуется добавлять через тег <img>.

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

Запись background-position с двумя параметрами поддерживается всеми используемыми браузерами.

Запись с четырьмя параметрами для отсчета от правой и нижней сторон работает только в IE9+, Firefox 13+, Chrome 25+, Safari 7+.

Свойства background-position-x и background-position-y не поддерживаются браузером Firefox вплоть до 48-й версии, а также не воспринимаются мобильными браузерами Opera Mini и Opera Mobile до версии 12. 1.

Подробную информацию вы всегда можете посмотреть на сайте Caniuse.com.

Далее в учебнике: background-attachment — фиксация фона.

seodon.ru | CSS справочник — background-position

Опубликовано: 18.08.2010 Последняя правка: 08.12.2015

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

Вместо background-position можно использовать универсальное свойство background.

Тип свойства

Назначение: цвет и фон.

Применяется: ко всем элементам.

Наследуется: нет.

Значения

Значением свойства background-position является одна или две (разделенных пробелом) величины, указывающие координаты по горизонтали и вертикали относительно области позиционирования.

Проценты — числа со знаком процента (%) на конце, где за 100% берется ширина или высота области позиционирования элемента. Отсчет ведется от левого верхнего угла этой области. Допускается указывать отрицательные значения (-20%).
Размеры — относительные или абсолютные величины в единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Для них тоже допустимо указывать отрицательные значения и тоже отсчет ведется от левого верхнего угла.
top — ключевое слово, означающее то же, что и 0% по вертикали (верх области).
right — значение, означающее то же, что и 100% по горизонтали (правая сторона области).
bottom — эквивалентно 100% по вертикали (низ области).
left — то же, что и 0% по горизонтали (левая сторона области).
center — то же, что и 50% по горизонтали или вертикали (центр области позиционирования по горизонтали или вертикали).

inherit — наследует значение background-position от родительского элемента.

Процентная запись: относительно размеров самого элемента.

Значение по умолчанию: 0% 0%.

Существует определенный порядок указания значений background-position, позволяющий браузерам точно определить, какая из величин отвечает за начальное положение фонового изображения по горизонтали, а какая — по вертикали:

Если используется два ключевых слова, то их порядок не важен.
Если из двух величин ключевое слово только одно либо обе величины указаны в процентах или размерах CSS, то первая отвечает за горизонтальную позицию, а вторая — за вертикальную.
Если указана только одна величина, то вторая считается равной значению center.

Синтаксис

background-position: [проценты | размеры | left | center | right] || [проценты | размеры | top | center | bottom] | inherit

Пример CSS: использование background-position

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon. ru - CSS свойство background-position</title>
  <style type="text/css">
   div {
    background: url('images/elka.gif') no-repeat; /* адрес картинки
                                            и запрет на повторение */
    height:200px; /* высота блоков DIV */
   }
   .div1 {
    background-color: #ccff99; /* цвет фона */
    background-position: 5cm 20px; /* позиция фона */
   }
   .div2 {
    background-color: #ff99cc;
    background-position:center 110px;
   }
   .div3 {
    background-color: #99ccff;
    background-position: right;
   }
  </style>
 </head>
 <body>
  <div>DIV1 - background-position: 5cm 20px.</div>
  <div>DIV2 - background-position: center 110px.</div>
  <div>DIV3 - background-position: right.</div>
 </body>
</html>

Результат примера

Версии CSS

Версия:	CSS 1	CSS 2	CSS 2.1	CSS 3
Поддержка:	Да	Да	Да	Да

Браузеры

Браузер:	Internet Explorer		Google Chrome	Mozilla Firefox	Opera	Safari
Версия:	6. 0 и 7.0	8.0 и выше	2.0 и выше	2.0 и выше	9.2 и выше	3.1 и выше
Поддержка:	Частично	Да	Да	Да	Да	Да

Internet Explorer 6.0 и 7.0 не понимают значение inherit.

Центрировать фоновое изображение, которое представляет собой вставку HTML — Пользовательский код — Forum

Anastasiia_G (Анастасия Грианченко) 14 июня 2020 г., 17:32

Привет, ребята,
Я делаю целевую страницу с разделом героя с эффектом водной ряби, используя клонируемый проект https://webflow.com/website/js-ripple-effect?s=js-ripple-effect, и я была проблема с центрированием фонового изображения.

https://water-ripple-effect-0e0d58.webflow.

io/ В мобильной версии вы можете видеть только левую часть используемого изображения, и мне нужно отцентрировать ее. Я плохо разбираюсь в коде (о, если бы я этого не делал), поэтому я прошу любой помощи с этим пользовательским кодом.

Ссылка на мой проект здесь: https://preview.webflow.com/preview/water-ripple-effect-0e0d58?utm_medium=preview_link&utm_source=designer&utm_content=water-ripple-effect-0e0d58&preview=180b8087ce3fe8b25289c65385e3f0de&mode=preview0005

Я пробовал набирать «слева 50% сверху 50%» и «слева: 50%; top: 50%» в эту HTML-вставку, и первый хорошо выглядел в режиме предварительного просмотра, но после публикации он сломал картинку (она выглядела как множество горизонтальных цветных линий)… Наверное, я делаю это неправильно.

Буду признателен за любую помощь или информацию. Спасибо!

КрисТ 14 июня 2020 г., 18:29

Привет Анастасия,

позиционирование вашего фонового изображения должно быть установлено по-другому.

Попробуйте эту вставку:

Изменено с «слева вверху» на «в центре вверху».

1 Нравится

Анастасия_Г (Анастасия Грианченко) 15 июня 2020 г., 6:40

Крис, большое спасибо!!! Он работает идеально!
О, если бы вы могли представить мое облегчение сейчас СПАСИБО!

КрисТ

15 июня 2020 г., 7:45

Ха-ха, добро пожаловать!

Кстати, неплохой эффект, хотелось бы увидеть конечный сайт, если вы не против поделиться им.

1 Нравится

st_lola (святая лола) 30 июня 2022 г. , 9:12

Спасибо @ChrisT !!!
Работает действительно отлично!!!

Как выравнивать и перемещать изображения с помощью CSS

Форматирование изображений и текста выполняется с помощью CSS. Они могут быть выровнены по и плавать , чтобы изображения можно было размещать в определенных местах на странице. Использование этих параметров поможет вам создать более понятный контент.

Выровненные изображения не обтекают текстом. При выравнивании изображений изображение будет располагаться только слева, справа или по центру, а текст будет следовать до и после изображения. Выравнивание оставляет довольно много свободного места на вашем сайте. Вы увидите пробел, когда пройдете раздел выравнивания.

В плавающем изображении текст будет обтекать изображение, как в обычной книге или газете. Изображения также можно плавать, чтобы они отображались на вашем сайте горизонтально. Это хорошо для отображения изображений в виде галереи. В следующих разделах объясняется, как плавать и выравнивать изображения с помощью CSS.

Выравнивание по левому краю, по центру и по правому краю
- Выравнивание по левому краю
- Выравнивание по центру
- Выравнивание по правому краю
Плавающие изображения с использованием CSS
- Плавающие изображения влево для переноса текста
- Плавающие изображения вправо для переноса текста
- Плавающие изображения влево по горизонтали

Выравнивание по левому краю, по центру и по правому краю встроенный стиль CSS.

Текст НЕ обтекает изображения, которые просто выровнены. Ниже объясняется, как выровнять изображения по левому, правому краю и по центру с помощью CSS.

Выравнивание по левому краю

Строка кода ниже предназначена для выравнивания изображения по левому краю.

  png" />

Выравнивание по центру

Следующая строка кода предназначена для центрирования изображения.

Выравнивание по правому краю

Следующая строка кода содержит атрибут CSS для выравнивания по правому краю.

Плавающие изображения с использованием CSS изображение. Далее будет объяснено горизонтальное выравнивание изображений и размещение изображений вокруг текста.

Плавающие изображения слева для переноса текста

Этот код выравнивает изображение по левому краю текстового блока. Обратите внимание, что поле в коде определяет пространство вокруг изображения. Код определяет пространство в пикселях по часовой стрелке: сверху, справа, снизу и слева.

Вы можете видеть, что код ниже имеет поля 0 пикселей (сверху), 15 пикселей (справа), 15 пикселей (снизу) и 0 пикселей (слева). Код позволяет оставить 15 пикселей сверху и справа от изображения.

Nunc pulvinar lacus id purus ultrices id sagittis neque convallis. Nunc vel libero orci. Vivamus и скорбь, а также немного радости. Duis imperdiet mi id lorem pellentesque темпус. Ut quis felis posuere Tellus Feugiat Ultrices. Презентация id Tortor Non Tellus Viverra Placerat.

Nullam cursus varius tellus, id laoreet magna hendrerit at. Nulla sit amet purus at nunc blandit ultricies eu a urna. Proin euismod porttitor neque id ultricies. Proin faucibus convallis elit. Maecenas rhoncus arcu at arcu. Проин либеро. Проин жир. In quis lorem vitae elit consectetuer pretium. Nullam ligula urna, adipiscing nec, iaculis ut, elementum non, turpis. Пульвинарная мышца.

Важно! Плавающие изображения будут накладываться друг на друга, если плавающие изображения не очищены. Убедитесь, что вы разместили четкий код с плавающей запятой после каждого раздела, в котором плавает ваше изображение. Ниже приведен код для очистки ваших плавающих элементов.

Плавающие изображения Право на перенос текста

Следующий код перемещает изображение вправо. Обратите внимание, что поле отличается от кода, используемого, когда изображение перемещается влево.

Пеллентеск матовый тинцидант порттитор. Maecenas condimentum iaculis ligula, sit amet scelerisque nibh aliquam in. Quisque ornare gravida est ut fermentum. Nam venenatis pretium enim, in laoreet nibh tristique sit amet.

Nullam cursus varius tellus, id laoreet magna hendrerit at. Nulla sit amet purus at nunc blandit ultricies eu a urna. Proin euismod porttitor neque id ultricies. Энейский сед турпис. Pellentesque обитатель morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec semeros, ornare ut, commodo eu, tempor nec, risus. Donec laoreet dapibus ligula. Praesent orci leo, bibendum nec, ornare et, nonummy in, elit. Donec interdum feugiat leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque feugiat ullamcorper ipsum.

Плавающие изображения слева по горизонтали

Здесь будет использоваться тот же код, что и раньше (см. ниже). Изображения просто размещаются одно за другим, чтобы они плавали горизонтально. Плавающие изображения в соответствии друг с другом — это еще один способ отобразить ваши изображения в виде галереи.

На этом завершается процесс выравнивания плавающих изображений и с CSS . Используйте эти параметры для создания более информативного и креативного контента путем смешивания текста и изображений на веб-страницах.

Штирлиц — Сеть печатных салонов в Перми

Background image по центру: background-position | htmlbook.ru