Фон css: background — CSS | MDN

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

Синтаксис

CSS 1

CSS 2.0

CSS 2.1‒2.2

CSS 3

background-position [ [ <процент> | <длина> | left | center | right ] [ <процент> | <длина> | top | center | bottom ]? ] | [ [ left | center | right ] || [ top | center | bottom ] ] | inherit;

Описание

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

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

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

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

JavaScript

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

---

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

Chrome

Поддерж.

Firefox

Поддерж.

Opera

Поддерж.

Maxthon

Поддерж.

IExplorer

Поддерж.

Safari

Поддерж.

iOS

Поддерж.

Android

Поддерж.

---

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

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%;

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

<длина>

Указывает фиксированную длину в качестве величины смещения (по вертикали | по горизонтали) фонового изображения от левого верхнего угла коробки (точка отсчёта по умолчанию). К примеру, если свойству задана пара значений «2cm 1cm», то верхний левый угол изображения помещается на 2см вправо и на 1см ниже верхнего левого угла «области позиционирования фона».

background-position: 25px 10px;

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

bottom

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

background-position: left bottom;

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

center

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

background-position: center;

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

left

Если для горизонтального положения задано одно значение, то вычисляется как «

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

background-position: left center;

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

right

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

background-position: right 25% center;

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

top

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

background-position: right 5% top 5px;

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

inherit

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

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

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

---

Пример использования

Листинг кода

<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Свойство background-position</title>
<style type=»text/css»>
body {
background: url(‘/examples/images/fig-red. png’) repeat-y;
background-position: center; /* CSS 1-2.2 */
background-position: right 50% bottom 50%; /* CSS 3 */
}
</style>
</head>
<body>
<h2>Положение фоновых изображений</h2>
<p>Фоновое изображение документа повторяется вертикально по центру области просмотра.</p>
</body>
</html>

Свойство background-position

webkit-background-size — свойство css :: руководство cssdot.ru

Свойство -webkit-background-size позволяет указывать размеры фонового изображения, которые могут быть заданы в абсолютных величинах (cm, mm, in и т.д.), относительных (px, em и т.д.), или в процентах, по отношению к ширине и высоте элемента контейнера. Масштабировать фоновое изображение возможно как с сохранением исходных пропорций, так и без них.

Допустимые значения

• length{1,2} — задает размер фонового изображения в абсолютных величинах (cm, mm, in и т. д.) или относительных (px, em и т.д.). Если задано только одно значение, то второе вычисляется автоматически исходя из пропорций картинки.
• percentage{1,2} — задает размер фонового изображения в процентах от ширины и/или высоты элемента контейнера. Если задано только одно значение, то второе вычисляется автоматически исходя из пропорций картинки.
• auto{1,2} — задает размер фонового изображения равным исходному, в случае, если указаны обе величины auto, или просто auto; а если указан только для одной стороны картинки (25% auto), то размер вычисляется исходя из пропорций картинки.
• cover — масштабирует картинку с сохранением пропорций по меньшей стороне, то есть так, чтобы фон с избытком покрывал блок-контейнер.
• contain — масштабирует картинку с сохранением пропорций по большей стороне, то есть так, чтобы блок-контейнер с избытком покрывал фон.

Примечания

Chrome 1-3, Safari 3-4

Свойство -webkit-background-size в движке WebKit изначально было реализовано в рамках черновика спецификации CSS3, в котором отсутствовали ключевые слова contain и cover, а так же предполагалось, что если задан размер фоновой картинки с использованием только одного параметра, то второй параметр считается, не пропорционально размерам картинки, а равен первому.

Свойство -webkit-background-size относится к спецификации CSS, применяется к всем элементам, и действует на всех визуальные носителях, его значение не наследуется от родительского элемента в иерархии документа, Является расширением движка WebKit (браузеры Chrome и Safari), и не совместимо с другими браузерами.

Смотри также:

• background-size — Размер фонового изображения, или его масштаб относительно элемента-контейнера.
• -o-background-size — Размер фонового изображения, или его масштаб относительно элемента-контейнера.
• -moz-background-size — Размер фонового изображения, или его масштаб относительно элемента-контейнера.

• Спецификация стандарта CSS 3
• Описание на Mozilla Developer Network
• Описание на Microsoft Developer Network
• Описание на Safari Developer Library

Краткое описание

Размер фонового изображения, или его масштаб относительно элемента-контейнера.

Синтаксис:

[ <length> | <percentage> | auto ]{1,2} | cover | contain [, [ <length> | <percentage> | auto ]{1,2} | cover | contain]*

Применяется к:

всем элементам

Наследование:

не наследуется

Тип носителя:

визуальные

Объектная модель документа (DOM):

[элемент].style[‘-webkit-background-size’]

Кроссбраузерная совместимость

Internet Explorer

не поддерживается

Firefox

не поддерживается

Chrome

1.0	2.0	3.0	4.1	5.0	6.0	7.0	8.0	9.0	10.0	11.0	12.0	13.0	14.0	15.0	16.0	17.0	18.0	19.0	20.0
+/-	+/-	+/-	+	+	+	+	+	+	+	+	+	+	+	+	+	+	+	+	+

Safari

1. 0	1.1	1.2	1.3	2.0	3.0	3.2	4.0	5.0
—	—	—	—	—	—	+/-	+/-	+

Opera

не поддерживается

Фоновые изображения CSS и доступность

Появилось множество статей, в которых обсуждались фоновые изображения и проблемы их доступности. Кажется, нет четкого решения для всех браузеров и обсуждения всех текущих методов в одном месте.

Проблема

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

Основная проблема с недекоративными фоновыми изображениями CSS заключается в том, что при отключении изображений или включении режима высокой контрастности (например, в ОС Windows) фоновые изображения исчезают. Если фоновое изображение либо содержит текст, как в случае вкладок страниц, либо содержит осмысленные изображения значков, то пользователи режима высокой контрастности и те, у кого нет изображений, не увидят этот контент. Хотя это может повлиять только на пользователей программ чтения с экрана, для пользователей программ чтения с экрана это проще решить, используя атрибут title в ссылках на изображения и текст за пределами экрана внутри контейнеров, содержащих фоновые изображения.

Сравнение со встроенными изображениями

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

Требования

Для изображений текста, для которых часто используется этот метод, существует четкое требование WCAG 2 уровня AA не использовать изображения текста, когда текст может быть отображен технологической платформой. Для веб-приложений почти всегда можно создать текст, за исключением шрифтов, которых может не быть в пользовательских системах. В этих случаях можно использовать технику стиля Cufon. Проблема все еще остается для изображений, которые не являются текстовыми, но имеют смысл, и проблемы по-прежнему относятся к другим требованиям доступности, таким как Раздел 508.

Решения

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

Не использовать фоновые изображения

Просто заменить недекоративный фон CSS стандартными встроенными изображениями. Это решение не решает проблему производительности, но предоставляет доступное решение и показывает, сколько сайтов было отрендерено за последние 15 лет.

Размещение частей встроенного изображения

Не используйте фоновые изображения — используйте встроенные изображения, но используйте CSS для размещения только той части изображения, которую вы хотите видеть на нужных элементах. В основном это включает в себя создание встроенной карты спрайтов изображения. Информацию об этой технике можно найти в статье TJK Design CSS Sprite.

Использовать до или после псевдоэлементов

Для отображения изображений можно использовать псевдоэлементы. Этот метод отлично подходит для изображений, чтобы они оставались на экране, но не поддерживается некоторыми браузерами, в основном Internet Explorer 7. Информацию об этом методе можно найти в блоге Paciello Group. Кроме того, псевдоэлементы не могут быть выбраны.

Использовать HTML 5 Canvas

Элемент canvas можно использовать для отображения изображения и размещения холста поверх текста внутри элемента. Это метод, который Cufon использует, когда поддерживается HTML 5. В противном случае Cufon использует VML для отображения пользовательских шрифтов. Cufon разбивает каждое слово на отдельный элемент span, и, таким образом, одним из побочных эффектов использования Cufon является то, что текст может быть разбит на части при чтении с помощью программы чтения с экрана.

Используйте трюк с позиционированием CSS

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

Этот метод работает неодинаково в разных браузерах. Firefox по-прежнему отображает текст поверх фонового изображения, в то время как Internet Explorer скрывает текст за изображением. Хотя в режиме высокой контрастности Internet Explorer не отображал текст должным образом.

Заключение

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

Хотите расширить знания своей команды о передовых методах веб-доступности?

Узнайте больше о наших выездных семинарах под руководством экспертов и о нашем портале электронного обучения.

Смещение края положения фона в CSS | Могу ли я использовать… Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

?

Смещение края положения фона CSS

— CR

• Глобальное использование

  99,36% + 0% знак равно 99,36%

Позволяет позиционировать фоновые изображения CSS относительно указанного края, используя синтаксис значений от 3 до 4. Например: background-position: справа 5px снизу 5px; для позиционирования на 5 пикселей от нижнего правого угла.

Chrome

1. 4–24: не поддерживается
2. 25–106: поддерживается
3. 107: поддерживается
4. 108–110: поддерживается

Edge

1. 12 — 105: Supported
2. 106: Supported

Safari

1. 3.1 — 6.1: Not supported
2. 7 — 16.0: Supported
3. 16.1: Supported
4. 16.2 — TP: Supported

Firefox

1. 10% — Not supported»> 2 — 12: не поддерживается
2. 13 — 105: Поддерживается
3. 106: Поддерживается
4. 107 — 108: Поддерживается

Opera

7777777777777777777777777777777777777777777777777777777777777 год70122 10.5 — 90: поддержан
2. 91: Поддерживается

IE

1. 5,5 — 8: не поддерживается
2. 9 — 10: поддержан
3. 11: поддержан

47. 100075

5
5

5
5
5
5
5
5
5
5
5
5967
75
75
7575
7967
7967
1. .

   Safari on iOS

   1. 3.2 — 6.1: Not supported
   2. 7 — 16.0: Supported
   3. 16.1: Supported

   Samsung Internet

   1. 4 — 17.0: Supported
   2. 18.0: Supported

   Opera Mini

   1. all: Supported

   Opera Mobile

   1. 10: Not supported
   2. 11 — 12.1: Supported
   3. 64: Supported

   UC Browser for Android

   1. 13.4: Supported

   Браузер Android

   1. 2.1–4.