Background-position: позиционирование фона
Свойство background-position позволяет указывать начальную позицию фонового рисунка сразу для двух осей — x и y. Впрочем, можно воспользоваться и отдельными свойствами для каждой оси — background-position-x и background-position-y .
Значения background-position
В качестве значений могут выступать как специальные ключевые слова, так и числовые значения в единицах измерения CSS — процентах, пикселях и т. д.
Ключевые слова для горизонтального позиционирования
- left — фоновый рисунок прилеплен к левой стороне элемента;
- center — фоновый рисунок расположен в центре оси x;
- right — фоновый рисунок прилеплен к правой стороне элемента.
Ключевые слова для вертикального позиционирования
- top — фоновый рисунок прилеплен к верхней стороне элемента;
- center — фоновый рисунок расположен в центре оси y;
- bottom — фоновый рисунок прилеплен к нижней стороне элемента.
Сокращенная запись для двух осей
Часто позиционирование фона задается сразу для двух осей. Для этого удобно пользоваться сокращенной записью, т. е. свойством background-position. Оно принимает одно либо два значения (для позиционирования сразу по двум осям либо по каждой отдельно соответственно).
Ниже — различные примеры позиционирования фона с помощью ключевых слов:
background-position: top center; /* фон вверху по центру */ background-position: top right; /* фон в верхнем правом углу */ background-position: bottom left; /* фон в левом нижнем углу */ background-position: center right; /* фон справа по центру */
Значения можно менять местами — они будут работать так же.
Если вы установили повтор фона с помощью свойства background-repeat , то background-position будет определять, от какой точки будет начинаться дублирование изображения.
Для позиционирования фона можно использовать и одно значение для двух осей сразу:
background-position: center; /* фон по центру */ background-position: left; /* фон слева по центру */ background-position: right; /* фон справа по центру */ background-position: top; /* фон вверху по центру */ background-position: bottom; /* фон внизу по центру */
Точные значения в единицах измерения CSS
Вы можете управлять расстоянием фона от левого и верхнего краев элемента с помощью точных значений, указанных в единицах измерения CSS (например, в пикселях либо em). Пример:
Такая запись означает, что фон удален от левого края на 10 пикселей и от верхнего края на 25 пикселей. Здесь важен порядок записи значений: первое значение отвечает за положение фонового рисунка по горизонтали, второе — по вертикали. Допустимы и отрицательные значения (например, они могут быть полезны в случае, если с левой или верхней стороны фоновой картинки есть область, которую необходимо спрятать).
Регулировать расстояние фона, отталкиваясь от правой или нижней стороны элемента, можно с помощью специального значения, которое записывается так:
Здесь ключевые слова right и bottom говорят браузеру, что вы хотите делать отсчет от правой и нижней стороны. Следом за каждым из ключевых слов записывается желаемое значение. Так, 15px — это расстояние между фоном и правой стороной элемента, а 40px — расстояние между фоном и нижней стороной элемента.
Процентные значения
Большое удобство предоставляет возможность записи значений в процентах. Расстояние вычисляется, исходя из размеров элемента с заданным фоном. Допустимы отрицательные процентные значения, но результат здесь может быть неожиданным.
Лучший способ понять, как перемещается фон под управлением процентных значений — это попрактиковаться. А пока что покажем несколько примеров позиционирования фона через проценты:
Обратите внимание: значение 50% идеально центрирует фоновое изображение (как по вертикали, так и по горизонтали), поскольку точка центра устанавливается в середине фона, а не в его начале или конце.
Комбинирование значений
Да, вы можете записывать для каждой из осей свое значение в необходимых единицах измерения (либо используя ключевое слово). Комбинируйте точные значения с относительными, ключевые слова со значениями в единицах измерения — полная свобода действий. Примеры:
Важно: фоновые изображения и печать
Как правило, при печати страницы фоновые изображения не отображаются. Учитывайте это при работе с важной графикой — например, логотип компании, карту проезда и другие иллюстрации, содержащие важную информацию, рекомендуется добавлять через тег .
Поддержка браузерами
Запись 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 — фиксация фона.
Как установить фон в CSS. Cвойство background
Свойство background позволяет установить фоновое изображение, цвет фона и другие свойства стиля для заданного элемента.
background также объединяет в себе несколько других свойств:
- background-color — задаёт цвет фона элемента;
- background-image — устанавливает фоновое изображение для элемента;
- background-position — определяет начальную позицию фонового изображения;
- background-repeat — указывает, должно ли фоновое изображение повторяться;
- background-size — устанавливает размер фонового изображения;
- background-attachment — определяет, будет ли фоновое изображение прокручиваться вместе с содержимым элемента.
�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Синтаксис
selector
Значения и примеры использования
Background-color
Свойство background-color задаёт цвет фона элемента. Значение задаётся в виде hex-кодов, RGB-функций или названий цветов:
background-color: #FFA500; /* Оранжевый цвет фона с помощью hex-кода */ background-color: rgb(255, 0, 0); /* Красный цвет фона с помощью RGB-значения */ background-color: rgba(255, 0, 0, 0.5); /* Полупрозрачный красный фон с помощью RGBA-значения */ background-color: white; /* Цвет фона с помощью ключевого слова */ background-color: transparent; /* Прозрачный фон */ background-color: inherit; /* Наследует цвет фона */ .options
Background-image
Свойство background-image позволяет задать изображение в качестве фона элемента. Это может быть любой тип изображения, включая jpeg, png, gif, svg и другие. Значение этого свойства указывается в формате URL, который ссылается на изображение.
.image-section < height: 300px; background-image: url("./images/nunzio-guerrera-uWZL-6wsUt4-unsplash.jpg"); background-size: cover; background-position: center; >
Также есть возможность использовать несколько изображений для фона. Для этого нужно указать несколько значений url() через запятую. При этом каждое изображение будет располагаться друг над другом, начиная с первого указанного значения.
Background-repeat
Свойство background-repeat определяет, как фоновое изображение будет повторяться внутри элемента, когда оно меньше размера элемента.
background-repeat может принимать следующие значения:
- repeat — изображение будет повторяться как по горизонтали, так и по вертикали (это значение является значением по умолчанию).
- repeat-x — изображение повторяется только по горизонтали.
- repeat-y — изображение повторяется только по вертикали.
- no-repeat — изображение будет отображаться только один раз.
section < height: 200px; background-image: url("./images/image.jpg"); background-repeat: repeat; color: #070707; >
Background-position
Свойство background-position устанавливает позицию фона. Задаётся в процентах или пикселях относительно верхнего левого угла элемента. Чтобы выровнять центральную часть фонового изображения по центру элемента, можно использовать значение 50% 50% , где первое значение указывает позицию по горизонтали, а второе по вертикали.
.position < background-image: url("./images/image.jpg"); background-size: cover; background-position: 50% 50%; padding: 50px; color: #ffffff; >
Background-size
Свойство background-size позволяет установить размеры фонового изображения. Значение может быть указано в пикселях, процентах, которые рассчитываются от размера элемента, или любых других доступных для CSS единицах измерения. Также можно указать ключевое слово:
- auto — значение по умолчанию и оно указывает на то, что размер фонового изображения должен быть равен его исходному размеру.
- cover — фоновое изображение будет растянуто по всей ширине и высоте элемента, что приведет к обрезанию изображения, если его размеры не соответствуют размерам элемента. При этом гарантируется, что весь элемент будет полностью заполнен изображением.
.image-section < height: 300px; background-image: url("./images/image.jpg"); background-size: cover; background-position: center; >
- contain — фоновое изображение будет изменено пропорционально, чтобы подходить размеру элемента, что гарантирует, что вся картинка будет видна в элементе. Однако возможно оставление пустых областей с двух сторон элемента.
.image-section < height: 300px; background-image: url("./images/image.jpg"); background-size: contain; background-position: center; >
Background-attachment
Свойство background-attachment указывает, будет ли фон элемента прокручиваться вместе с содержимым страницы или останется на месте.
- scroll — фоновое изображение прокручивается вместе с элементом, как обычный фон.
- fixed — фоновое изображение остается на месте, когда элемент прокручивается.
- local — фоновое изображение фиксируется с учётом поведения элемента. Если элемент имеет прокрутку, то фон будет прокручиваться вместе с содержимым, но фон, выходящий за рамки элемента, остаётся на месте.
.image-section < height: 300px; background-image: url("./images/image.jpg"); background-size: contain; background-attachment: fixed; >Нюансы
Если одновременно установлены background-color и background-image , то background-image будет отображаться поверх цвета фона.
Если установлен background-attachment: fixed , то позиционирование фона осуществляется относительно окна браузера, а не относительно элемента, на который установлен фон.
.image-section < height: 300px; background-image: url("./images/image.jpg"); background-size: cover; background-position: 50% 50%; background-attachment: fixed; >Если значение background-size указано в процентах, то размер изображения будет задаваться относительно размера элемента.
Материалы по теме
- Полупрозрачный градиент над картинкой на чистом CSS
- Специфичность селекторов в CSS
- Обзор цветовых форматов в CSS
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Игры с бесконечностью, или зачем нам infinity в CSS
�� Это перевод статьи Will Boyd из блога CodersBlock. Оригинал: https://codersblock.com/blog/playing-with-infinity-in-css/
В CSS есть константа Infinity. Когда я только узнал об этом, ко мне в голову сразу пришла гора абсурдных идей, как это использовать, среди которых была и пара неплохих.
Ну, мне так кажется.
Кстати, если что, infinity можно использовать только внутри calc() . Ну, поехали!
�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
- 5 марта 2024
Межстрочное расстояние в CSS. Свойство line-height
line-height задает интерлиньяж, то есть расстояние между базовыми линиями соседних строк текста. Это свойство может влиять на читабельность текста и его восприятие.
�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Значение line-height можно указывать как в абсолютных единицах (например, px , pt ), так и в относительных ( em , % , без единицы измерения). Рекомендуется использовать относительные единицы, так как они позволяют сохранить масштабируемость и адаптивность текста.
- line-height: 1.2; — относительное значение, не зависящее от размера шрифта.
- line-height: 20px; — абсолютное значение, фиксированный размер интерлиньяжа.
- line-height: 1.5em; — относительное значение, зависящее от размера шрифта элемента.
- 4 марта 2024
Свойство text-align
Свойство text-align в CSS используется для определения горизонтального выравнивания текста внутри элемента.
�� Сегодня вам бесплатно доступны тренажёры по HTML и CSS.
Свойство text-align может принимать несколько значений, включая:
- left — выравнивает текст по левому краю контейнера.
- right — выравнивает текст по правому краю контейнера.
- center — центрирует текст внутри контейнера.
- justify — выравнивание текста по ширине. Оба края текста (левый и правый) будут выровнены по краям контейнера.
Пример использования свойства text-align :
Этот код выравнивает текст внутри всех параграфов ( ) по центру.
Для практики и улучшения своих навыков работы с text-align и другими свойствами CSS, рекомендуем пройти тренажёр. Он поможет лучше понять, как работает выравнивание текста, и даст возможность попрактиковаться в использовании различных значений свойства text-align .
- 4 марта 2024
CSS-препроцессоры в 2024. Большой обзор
Препроцессоры позволяют разработчикам расширить возможности CSS. Например, они добавляют селекторы наследования, вложенные правила, примеси и многие другие.
Одна из важных задач препроцессоров — упростить и ускорить процесс разработки и поддержку стилей в проекте. В обзоре рассмотрим наиболее популярные препроцессоры в 2024 году и расскажем, как выбрать подходящий.
�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
- 29 февраля 2024
Как прятать
Когда display: none , а когда visibility: hidden ? — спрашивает нас RedFox. Зависит от того, что вы пытаетесь сделать. Есть и другие варианты как спрятать блок и даже специальный атрибут. Давайте разберёмся!
�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Если вам приходится что-то прятать, то лучше всего это вообще убрать: сайт легче, код чище. ошибок меньше! Но если вам нужно, чтобы оно там пряталось до поры, а потом кому-то пригодилось — это другое дело. Здесь важно не ошибиться с выбором способа.
- 28 февраля 2024
Новое в 2023 — text-wrap: balance
В 2023 в CSS появилось любопытное свойство text-wrap со значением balance . Оно «уравновешивает» текстовые элементы, чтобы они приятнее выравнивались внутри блока.
Ограничение — текст не длиннее 6 строк, иначе браузеру придётся непросто, и лучше не применять это свойство к body .
�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Вот пример заголовка c text-wrap: balance и без него.
На момент написания заметки свойство поддерживается во всех больших браузерах, кроме Safari, а на мобильных — только в Chrome, но то ли ещё будет.
- 13 ноября 2023
Знакомство с CSS
После того как мы разобрались с базовой структурой веб-страницы с помощью HTML, пришло время привнести в неё стиль и красоту. В этом нам поможет CSS, что означает Cascading Style Sheets, или «каскадные таблицы стилей».
CSS используется для оформления HTML-страниц. Если HTML — это скелет сайта, то CSS — его одежда. С помощью CSS мы можем задавать цвета, шрифты, отступы, добавлять анимации и многое другое.
�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
- 1 ноября 2023
Увеличение ссылки при наведении
Задача: плавно увеличить ссылку при наведении.
Решение:
a < display: inline-block; transition: transform 0.3s ease; >a:hover
Первые два свойства просто немного меняют вид ссылки. Свойство color: maroon; меняет цвет текста в тегах на темно-красный, а свойство text-decoration : none; убирает подчеркивание.
Но наша задача — плавно увеличить размер ссылки, а не просто её перекрасить. Поэтому используем свойство transform: scale(1.2) , которое срабатывает при наведении курсора и увеличивает размер ссылки в 1.2 раза по сравнению с её начальным размером.
�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
- 13 октября 2023
WOFF больше не нужен
Я купил и скачал шрифты для недавнего проекта, распаковал папку, где были только WOFF2-файлы, и сначала не поверил, что такое бывает.
Потом мне стало интересно: они что, забыли WOFF? А он вообще ещё нужен? Ну, всё-таки, веб — это место, где постоянно всё меняется и улучшается, поэтому я пошёл и спросил людей в Mastodon. Ответ был единодушным: нужен только WOFF2!
�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Я хорошо помню пост от Зака в конце 2016, после которого я отказался от исчерпывающего синтаксиса @font-face , включавшего TTF, EOT и SVG-шрифты, и перешёл только на WOFF2 и WOFF.
Похоже, с тех пор мир веб-шрифтов изменился ещё разок, и вот актуальная версия @font-face :
@font-face
Остался всего один формат. Просто, скажите?
Как писал Зак, «так как в вебе, когда шрифт не найден, всё равно подгружаются системные шрифты, мы можем идти в ногу со временем». Итак, какие браузеры отправятся в тёмные века системных шрифтов с этим синтаксисом?
- IE 11, 10, 9, 8, 7, …
- Chrome 4–35
- Edge 12 и 13
- Safari 3–9.1
- Firefox 2–38
- Opera 22 и ниже
- Android 4.4.4 KitKat и ниже (а это
- Safari на iOS 3.2–9.3
Caniuse.com показывает, что почти у 95% пользователей есть браузер с поддержкой WOFF2. А в относительной статистике (Date Relative — прим. перев.) заметно, что массовый переход на WOFF2 случился в 2015 и 2016. К концу 2016 во всех последних версиях больших браузеров появилась поддержка WOFF2.3
А спустя 7 лет поддержка расширилась настолько, что можно уже не добавлять в проект WOFF-файлы — ну, кроме случая, когда вы точно знаете, что много ваших пользователей используют старые устройства и браузеры.
С другой стороны, нет смысла и удалять WOFF из старых проектов. Если вы подключали WOFF2 раньше WOFF внутри @font-face — и порядок здесь важен — то браузер просто скачает и подключит WOFF2-версию.
И если однажды вы, как и я, обнаружите себя перед папкой, полной файлов WOFF2, знайте, что WOFF — уже всё.
- 23 сентября 2023
Трясём пароль с помощью CSS
Знаете момент, когда всё на сайте уже сделано, и хочется добавить какую-нибудь маленькую незаметную фишку? Мы тоже знаем, поэтому давайте просто потрясём поле пароля, когда пользователь ввёл неверный пароль. Как на Маке.
�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Вот что получится в итоге:
- 7 сентября 2023
background-position
CSS свойство background-position устанавливает начальную позицию для каждого фонового изображения. Положение относительно уровня положения, установленного background-origin .
Интерактивный пример
Синтаксис
/* Ключевые слова */ background-position: top; background-position: bottom; background-position: left; background-position: right; background-position: center; /* значения */ background-position: 25% 75%; /* значения */ background-position: 0 0; background-position: 1cm 2cm; background-position: 10ch 8em; /* Несколько изображений */ background-position: 0 0, center; /* Значения смещения края */ background-position: bottom 10px right 20px; background-position: right 3em bottom 10px; background-position: bottom 10px right; background-position: top right 10px; /* Глобальные значения */ background-position: inherit; background-position: initial; background-position: unset;
Свойство background-position указывается в виде одного или нескольких значений , разделённых запятыми.
Значения
(en-US). Позиция определяет координату x/y, чтобы разместить элемент относительно границ поля элемента. Она может быть определена с использованием одного и двух значений. Если используются два значения, первое значение предоставляет горизонтальную позицию, а второе представляет вертикальную позицию. Если указано только одно, второе значение считается center .Синтаксис 1-значения: значение может быть:
- Значение ключевого слова center , которое центрирует изображение.
- Одно из значений ключевых слов top , left , bottom , right . Оно указывает край, на который следует поместить элемент. Затем для другого измерения устанавливается значение 50%, таким образом элемент размещается в середине указанного края.
- или . Оно указывает координату X относительно левого края, с координатой Y установленной на 50%. Синтаксис с 2-значениями: одно из значений определяет X, а другое определяет Y. Каждое значение может быть:
- Одно из значений ключевых слов top , left , bottom , right . Если здесь указаны left или right , то оно определяет X, а другое заданное значение определяет Y. Если даны top или bottom , то оно определяет Y, а другое значение определяет X.
- Если одно значение top или bottom , то другое значение не может быть top или bottom .
Официальный синтаксис
background-position =
# (en-US)=
[ (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom | (en-US) ] (en-US) | (en-US)
[ (en-US) left | (en-US) center | (en-US) right | (en-US) ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) ] (en-US) | (en-US)
[ (en-US) center | (en-US) [ (en-US) left | (en-US) right ] (en-US) ? (en-US) ] (en-US) && (en-US) [ (en-US) center | (en-US) [ (en-US) top | (en-US) bottom ] (en-US) ? (en-US) ] (en-US)=
| (en-US)Примеры
Каждый из этих примеров использует свойство background для создания жёлтого, прямоугольного элемента, содержащего изображение звезды. В каждом примере, звезда находится в другой позиции. Третий пример иллюстрирует, как указать позиции для разных фоновых изображений в одном элементе.
HTML
div class="exampleone">Example Onediv> div class="exampletwo">Example Twodiv> div class="examplethree">Example Threediv>
CSS
/* Общий среди всех -ов */ div background-color: #ffee99; background-repeat: no-repeat; width: 300px; height: 80px; margin-bottom: 12px; > /* В этих примерах используется сокращённое свойство 'background' */ .exampleone background: url("startransparent.gif") #ffee99 2.5cm bottom no-repeat; > .exampletwo background: url("startransparent.gif") #ffee99 3em 50% no-repeat; > /* Несколько фоновых изображений: каждое изображение сопоставляется с соответствующей позицией, от первого указанного до последнего. */ .examplethree background-image: url("startransparent.gif"), url("catfront.png"); background-position: 0px 0px, center; >
Результат
Спецификации
Specification CSS Backgrounds and Borders Module Level 3
# background-position- background-position-x : Список, каждый элемент которого состоит из: смещения, данного комбинацией абсолютной длины и процентов плюс ключевое слово
- background-position-y (en-US): Список, каждый элемент которого состоит из: смещения, данного комбинацией абсолютной длины и процентов плюс ключевое слово
Совместимость с браузерами
BCD tables only load in the browser
Quantum CSS заметки
- В Gecko есть ошибка, означающая, что background-position не может быть transitioned между двумя значениями, содержащими разные числа значений (en-US), для примера background-position: 10px 10px; and background-position: 20px 20px, 30px 30px; (смотрите Firefox bug 1390446). Новый параллельный CSS движок Firefox (также известный как Quantum CSS или Stylo, который планируется выпустить в Firefox 57) исправляет это.
Смотрите также
- background-position-x
- background-position-y (en-US)
- background-position-inline
- background-position-block
- Использование нескольких значений
- transform-origin (en-US)
Background-position: позиционирование фона
Свойство background-position позволяет указывать начальную позицию фонового рисунка сразу для двух осей — x и y. Впрочем, можно воспользоваться и отдельными свойствами для каждой оси — background-position-x и background-position-y .
Значения background-position
В качестве значений могут выступать как специальные ключевые слова, так и числовые значения в единицах измерения CSS — процентах, пикселях и т. д.
Ключевые слова для горизонтального позиционирования
- left — фоновый рисунок прилеплен к левой стороне элемента;
- center — фоновый рисунок расположен в центре оси x;
- right — фоновый рисунок прилеплен к правой стороне элемента.
Ключевые слова для вертикального позиционирования
- top — фоновый рисунок прилеплен к верхней стороне элемента;
- center — фоновый рисунок расположен в центре оси y;
- bottom — фоновый рисунок прилеплен к нижней стороне элемента.
Сокращенная запись для двух осей
Часто позиционирование фона задается сразу для двух осей. Для этого удобно пользоваться сокращенной записью, т. е. свойством background-position. Оно принимает одно либо два значения (для позиционирования сразу по двум осям либо по каждой отдельно соответственно).
Ниже — различные примеры позиционирования фона с помощью ключевых слов:
background-position: top center; /* фон вверху по центру */ background-position: top right; /* фон в верхнем правом углу */ background-position: bottom left; /* фон в левом нижнем углу */ background-position: center right; /* фон справа по центру */
Значения можно менять местами — они будут работать так же.
Если вы установили повтор фона с помощью свойства background-repeat , то background-position будет определять, от какой точки будет начинаться дублирование изображения.
Для позиционирования фона можно использовать и одно значение для двух осей сразу:
background-position: center; /* фон по центру */ background-position: left; /* фон слева по центру */ background-position: right; /* фон справа по центру */ background-position: top; /* фон вверху по центру */ background-position: bottom; /* фон внизу по центру */
Точные значения в единицах измерения CSS
Вы можете управлять расстоянием фона от левого и верхнего краев элемента с помощью точных значений, указанных в единицах измерения CSS (например, в пикселях либо em). Пример:
Такая запись означает, что фон удален от левого края на 10 пикселей и от верхнего края на 25 пикселей. Здесь важен порядок записи значений: первое значение отвечает за положение фонового рисунка по горизонтали, второе — по вертикали. Допустимы и отрицательные значения (например, они могут быть полезны в случае, если с левой или верхней стороны фоновой картинки есть область, которую необходимо спрятать).
Регулировать расстояние фона, отталкиваясь от правой или нижней стороны элемента, можно с помощью специального значения, которое записывается так:
Здесь ключевые слова right и bottom говорят браузеру, что вы хотите делать отсчет от правой и нижней стороны. Следом за каждым из ключевых слов записывается желаемое значение. Так, 15px — это расстояние между фоном и правой стороной элемента, а 40px — расстояние между фоном и нижней стороной элемента.
Процентные значения
Большое удобство предоставляет возможность записи значений в процентах. Расстояние вычисляется, исходя из размеров элемента с заданным фоном. Допустимы отрицательные процентные значения, но результат здесь может быть неожиданным.
Лучший способ понять, как перемещается фон под управлением процентных значений — это попрактиковаться. А пока что покажем несколько примеров позиционирования фона через проценты:
Обратите внимание: значение 50% идеально центрирует фоновое изображение (как по вертикали, так и по горизонтали), поскольку точка центра устанавливается в середине фона, а не в его начале или конце.
Комбинирование значений
Да, вы можете записывать для каждой из осей свое значение в необходимых единицах измерения (либо используя ключевое слово). Комбинируйте точные значения с относительными, ключевые слова со значениями в единицах измерения — полная свобода действий. Примеры:
Важно: фоновые изображения и печать
Как правило, при печати страницы фоновые изображения не отображаются. Учитывайте это при работе с важной графикой — например, логотип компании, карту проезда и другие иллюстрации, содержащие важную информацию, рекомендуется добавлять через тег
.
Поддержка браузерами
Запись 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 — фиксация фона.