background-position-x в CSS


Содержание

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

Пример

Как разместить фоновое изображение:

Подробнее примеры ниже.

Определение и использование

Свойство background-position задает начальную позицию фонового изображения.

Совет: По умолчанию фоновое изображение помещается в верхний левый угол элемента и повторяется как по вертикали, так и по горизонтали.

Значение по умолчанию: 0% 0%
Inherited: no
Animatable: yes. Читайте о animatable
Version: CSS1
Синтаксис JavaScript: object.style.backgroundPosition=»center»

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

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

Свойство
background-position 1.0 4.0 1.0 1.0 3.5

Note: IE8 and earlier do not support multiple background images on one element.

Синтаксис CSS

Значения свойств

Значение Описание
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
Если указано только одно ключевое слово, другое значение будет «center»
x% y% Первое значение представляет собой горизонтальное положение, а второе значение — вертикальное. Верхний левый угол равен 0% 0%. Правый нижний угол составляет 100% 100%. Если указано только одно значение, другое значение будет 50%. . Значение по умолчанию: 0% 0%
xpos ypos Первое значение представляет собой горизонтальное положение, а второе значение — вертикальное. Левый верхний угол-0 0. Единицы измерения могут быть пикселами (0px 0px) или любыми другими CSS-единицами. Если указано только одно значение, другое значение будет 50%. Вы можете смешивать% и позиции
initial Присваивает этому свойству значение по умолчанию. Читайте о initial
inherit Наследует это свойство из родительского элемента. Читайте о inherit

Другие примеры

Пример

Как разместить фоновое изображение для центрирования сверху:

Пример

Как разместить фоновое изображение внизу справа:

Пример

Как разместить фоновое изображение с помощью процента:

Пример

Как разместить фоновое изображение с помощью пикселов:

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

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

По умолчанию фоновое изображение располагается в верхнем левом углу элемента и повторяется по горизонтали и вертикали.

CSS синтаксис

Возможные значения

Значение Описание
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
Если используется одно ключевое слово, то вторым по умолчанию будет «center»
x% y% Первое значение — позиция по горизонтали, второе — по вертикали. Верхий левый угол имеет позицию 0% 0%. Нижний правый угол — 100% 100%. Если задается одно значение, то второе по умолчанию будет 50%. Значение по умолчанию: 0% 0%.
xpos ypos Первое значение — позиция по горизонтали, второе — по вертикали. Верхий левый угол имеет позицию 0 0. В качестве значений можно использовать пиксели (0px 0px), либо любые другие единицы измерения, допустимые в CSS. Если задается одно значение, то второе по умолчанию будет 50%. Допустимо совместное использование % и единиц расстояния.
inherit Значение наследуется от родительского элемента.
initial Устанавливает значение по умолчанию.

Пример №1

Позиционирование фонового изображения

Пример №2

Позиционирование фонового изображения при помощи процентов

Пример №3

Позиционирование фонового изображения при помощи пиксельных отступов

background-position

Easily manage projects with monday.com

The background-position property in CSS allows you to move a background image (or gradient) around within its container.

It has three different types of values:

  • Length values (e.g. 100px 5px )
  • Percentages (e.g. 100% 5% )
  • Keywords (e.g. top right )

The default values are 0 0. This places your background image at the top left of the container.

Length values are pretty simple: the first value is the horizontal position, second value is the vertical position. So 100px 5px will move the image 100px to the right and five pixels down. You can set length values in px , em , or any of the other CSS length values.

Percentages work a little differently. Get your math hats out: moving a background image by X% means it will align the X% point in the image to the X% point in the container. For example, 50% means it will align the middle of the image with the middle of the container. 100% means it will align the last pixel of the image with the last pixel of the container, and so on.

Keywords are just shortcuts for percentages. It’s easier to remember and write top right than 100% 0 , and that’s why keywords are a thing. Here is a list of all five keywords and their equivalent values:

  • top : 0% vertically
  • right : 100% horizontally
  • bottom : 100% vertically
  • left : 0% horizontally
  • center : 50% horizontally if horizontal isn’t already defined. If it is then this is applied vertically.

It’s interesting to note that it doesn’t matter what order you use for the keywords: top center is the same as center top . You can only do this if you’re exclusively using keywords, though. center 10% is not the same as 10% center .

This demo shows examples of background-position set with length units, percentages, and keywords.

Declaring Values

You can give background-position up to four values in modern browsers (see the Browser Support table for details).

If you declare one value, that value is the horizontal offset. The browser sets the vertical offset to center .

When you declare two values, the first value is the horizontal offset and the second value is the vertical offset.

Things get a little trickier when you start using three or four values, but you also get more control over your background placement.

A three- or four-value syntax alternates between keywords and length or percentage units. You can use any of the keyword values except center in a three- or four-value background-position declaration.

When you specify three values, the browser interpets the «missing» fourth value as 0. Here’s an example of a three-value background-position :

This positions the background image 45px from the right and 0px from the bottom of the container.

Here’s an example of a four-value background-position :

This puts the background image 45px from the right and 20px from the bottom of the container.

Notice the order of the values in the examples above: keywords followed by length units. A three- or four-value background-position must follow that format, with a keyword preceding a length or percentage unit.

This demo includes examples of one value, two value, three value, and four value background-position .

More Resources

Browser Support

The basic values are supported everywhere. The four-value syntax has this support:

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Chrome Opera Firefox IE Edge Safari
25 10.5 13 9 12 7

Mobile / Tablet

iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
7.0-7.1 11 all 4.4 78 68

That’s the same level of support as the background-position-x and background-position-y properties.

background-position

Поддержка браузеров

IE Opera Chrome Firefox Safari
IE до 7.0 (включ.) не поддерживает значение inherit + + + +

Пример

Как позиционировать фоновое изображение:

Описание и использование

Свойство background-position задает стартовую позицию фонового изображения.

Примечание: для правильной работы данного свойства в Firefox и Opera, свойство background-attachment должно быть «fixed».

Фон в CSS – памятка для начинающих

При вёрстке страниц веб-сайта часто требуется задать фон определённому объекту для улучшения читаемости текста и внешнего вида портала в целом. Какими способами и методами можно задавать фон в CSS?

Работа с фоном в CSS

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

background-color


Задаёт цвет фона. Его можно применять как к отдельным элементам

, так и ко всему веб-сайту с помощью тега .

background-image

Данное свойство используется для вставки фоновой картинки, указывая при этом ссылку на неё.

Обратите внимание на то, как указан путь к картинке. Это значит, что изображение должно находиться в той же директории, что и файл стилей CSS. Иначе придётся указывать полный путь к файлу.

background-repeat

Изображение из предыдущего примера будет повторяться по всему экрану благодаря данному свойству.

Оно может иметь несколько значений:

  • background-repeat: repeat-x — повторение по горизонтали;
  • background-repeat: repeat-y — повторение по вертикали;
  • background-repeat: repeat — повторение и по горизонтали и по вертикали;
  • background-repeat: no-repeat — изображение не повторяется.

Например, повторение по горизонтали выглядит так:

background-attachment

Это свойство определяет фиксирование фонового изображения при скроллинге:

  • background-attachment: scroll — фон прокручивается вместе со страницей;
  • background-attachment: fixed — фон остаётся неподвижным.

background-position

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

Свойство может задаваться в процентном формате, в пикселях, сантиметрах или словесно: top, bottom, center, right, left .

  • background-position: 50% 20% — изображение располагается по центру по горизонтали и на 20% отступает сверху;
  • background-position: 80px 60px — отступ изображения вниз на 80 пикселей от верхнего края и на 60 пикселей вправо от левого:

gradient

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

Использование градиента можно наглядно продемонстрировать в примере кода:

Все приведённые настройки можно сделать в одном свойстве background, записав их в перечисленном порядке.

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

Работа с размером фона в CSS

В CSS 2.1 фоновая картинка сохраняет фиксированный размер, однако в CSS 3 было введено подсвойство size, благодаря которому фоновое изображение может быть растянуто или сжато.

Существует несколько способов, позволяющих определить размер:

Абсолютное изменение размера

Ширина и высота по умолчанию устанавливаются автоматически, а новый размер можно задать с помощью различных единиц измерения.

Например, если исходное изображение имеет разрешение 300 на 300 пикселей, то такой код сделает его ширину в два раза меньше:

Если указано только одно значение, оно по умолчанию считается как ширина, высота определяется автоматически, и пропорции сохраняются.

Код, который масштабирует картинку до размера 100 на 100 пикселей, выглядит так:

Относительное изменение размера

Если применять проценты, размер будет основываться не на изображении, а на элементе.

То есть, ширина фонового изображения зависит от параметров контейнера. Если ширина контейнера составляет 600 пикселей, размер фонового изображения уменьшится до величины 300 на 300 пикселей.

Как показывает практика, использование процентов весьма полезно для адаптивного дизайна.

Масштабирование до максимального размера

В свойстве background-size значение contain масштабирует фоновое изображение так, чтобы оно полностью заполняло контейнер или всю страницу.

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

Такой фон страницы будет автоматически подгоняться под любое разрешение:

Заполнение фоном

Используя в свойстве background-size значение cover, фон масштабируется таким образом, чтобы заполнить всё пространство контейнера.

В том случае, если соотношения сторон различаются, картинка обрежется:

Масштабирование сразу нескольких фонов

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

Создание полупрозрачного фона в CSS

Полупрозрачный элемент хорошо заметен на фоновом рисунке. В веб-дизайне полупрозрачность достигается за счёт свойства opacity или задаваемого для фона формата цвета RGBA.

Особенность данного свойства заключается в том, что прозрачность действует не только на фон, но и на все дочерние элементы. После увеличения прозрачности, и текст и фон станут полупрозрачными.

Пример создания полупрозрачного блока:

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

В таком случае opacity не подходит и следует воспользоваться форматом RGBA, в котором помимо значений яркости синего, красного и зелёного цветов устанавливается ещё и значение прозрачности. 1 означает абсолютную непрозрачность, а 0 — полную прозрачность.

Пример задания прозрачного фона:

Надеемся, что данное руководство вам пригодилось, и желаем успехов в освоении веб-дизайна!

background-position

По умолчанию фоновое изображение начинает заполнять элемент с левого верхнего угла области позиционирования, которая изначально простирается до внутренних краев рамки элемента. С помощью свойства 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 , позволяющий браузерам точно определить, какая из величин отвечает за начальное положение фонового изображения по горизонтали, а какая — по вертикали:

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

Синтаксис

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

Версии 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 .

Свойство background-position

Cвойство background-position управляет расположением фонового изображения. Значение свойства состоит из двух частей, разделенных пробелом: x y .

x задаёт расположение по горизонтали, а y по вертикали.

В качестве значения x можно использовать ключевые слова left , center , right , значения в процентах и в пикселях.

В качестве значения y можно использовать ключевые слова top , center , bottom , значения в процентах и в пикселях.

Примеры использования свойства:

Так сработают примеры:

  1. картинка будет по центру;
  2. правый нижний угол;
  3. отступ 50px от левого края и 100px от верхнего;
  4. левый нижний угол;
  5. левый нижний угол.


Фон в CSS. Параметры background (color, image, position, repeat, attachment) для задания цвета фона или фоновой картинки html элементов

Здравствуйте, уважаемые читатели блога webcodius.ru. В этой статье продолжим рассматривать свойства CSS. На этот раз займемся настройками фона как для всей web-страницы, так и для отдельных элементов. Для этого используются пять CSS правил: background-position, background-image, background-repeat, background-color, background-attachment, — либо одно составное правило background. С помощью хорошо подобранного фона можно выделить важные элементы и оживить html страницу.

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

Итак, как я уже написал выше, за фон в CSS отвечают пять правил, которые могут быть объединены в одно сборное. Если вкратце, то:

  • background-color — задает цвет фона для любого Html элемента;
  • background-image — с помощью этого атрибута в качестве фона можно использовать картинку;
  • background-repeat — параметр повторения фоновой картинки;
  • background-position — позволяет указать позицию фонового изображения относительно элемента web страницы;
  • background-attachment — устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента веб страницы.

Далее рассмотрим подробнее каждое свойство.

Background-color и background-image

Background-color и background-image два свойства, которые влияют непосредственно на то каким будет фон элемента html страницы, либо фон всей страницы.

Свойство стиля background-color служит для задания цвета фона и имеет следующий синтаксис:

background-color: transparent| |inherit

Значение transparent делает фон прозрачным. Вообще по умолчанию цвет фона в любом элементе веб страницы прозрачный. Цвет можно задать в виде RGB-кода или имени. RGB-код задается в виде шести или трех цифр шестнадцатеричного кода. Значение inherit означает, что элемент наследует настройки фона от родительского элемента.

Например, зададим для абзаца черный цвет фона и белый текст. Так это будет выглядеть в коде html страницы:

У этого абзаца черный фон и белый текст

Либо так в коде CSS файла:

p <
background-color:#000000;
color:#ffffff
>

У этого абзаца черный фон и белый текст

Остальные четыре параметра касаются только фонового изображения, которое можно задать для любого элемента web-страницы. Какой графический файл использовать в качестве фоновой картинки задает свойство стиля background-image:

По умолчанию background-image имеет значение none, то есть никакого изображения для фона не используется. В случае если все таки в качестве фона необходимо использовать картинку, то необходимо указать адрес файла заключить его в скобки и перед всей этой записью поставить url:

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Не смотря на то, что оно довольно маленькое, вся область абзаца застелилась им.

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Не смотря на то, что оно довольно маленькое, вся область абзаца застелилась им.

А вот оригинальный вид фонового изображения:

Вообще графический фон выводится поверх обычного фона, заданного с помощью свойства background-color. Но если фоновая картинка будет содержать прозрачные области, то цветной фон будет просвечивать сквозь них. Прозрачные фрагменты поддерживают форматы GIF и PNG.

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

Background-repeat — параметры повторения фонового изображения

Свойство background-repeat может принимать следующие значения:

no-repeat — фоновое изображение не будет повторяться. В этом случае часть фона элемента останется не заполненным им. Предыдущий пример, но уже со свойством background-repeat:no-repeat:

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:no-repeat. Поэтому оно отображается только в левом верхнем углу.

В результате фоновая картинка отобразиться только в левом верхнем углу абзаца:

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:no-repeat. Поэтому оно отображается только в левом верхнем углу.

repeat — фоновое изображение будет повторяться и по горизонтали и по вертикали. Это значение по умолчанию.

repeat-x — фоновое изображение будет повторяться только по горизонтали. Пример:

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:repeat-x. Поэтому фоновая картинка заполнила только верхнюю часть абзаца.

repeat-y — фоновое изображение будет повторяться только по вертикали. Пример:

Для этого абзаца в качестве фона установлена картинка fonp.jpg. Для него также применено правило background-repeat:repeat-y. Поэтому фоновая картинка заполнила только левую часть абзаца.

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

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

Горизонтальная позиция может принимать следующие значения:

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

  • left — в этом случает фоновая картинка прижимается к левому краю элемента (значение по умолчанию);
  • center — фоновое изображение располагается по центру элемента;
  • right — фон прижимается к правому краю элемента.

Вертикальная позиция может иметь следующие значения:

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

  • top — фоновая картинка прижимается к верхнему краю элемента (значение по умолчанию);
  • center — фоновое изображение располагается по центру;
  • bottom — фон прижимается к нижнему краю.

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

Например, для смещения фонового изображения для этого абзаца на 250 пикселей по горизонтали и на 10 пикселей по вертикали я использовал следующие CSS правила:

background-image:url (//webcodius.ru/example/logo.png);
background-repeat:no-repeat;
background-position:250px 10px;

Если для свойства background-position указана только одна позиция, то вторая будет будет приниматься равной center в случае использования ключевых слов и 50% в случае использования числовых значений.

То есть если, например, необходимо выровнять фоновое изображение по центру правого края элемента web страницы, то достаточно указать следующее css правило:

Вообще соотношение между ключевыми словами и процентной записью следующее:

  • top left = left top = 0% 0% (выравнивание по левому верхнему углу)
  • top = top center = center top = 50% 0% (вверху по центру)
  • right top = top right = 100% 0% (по правому верхнему углу)
  • left = left center = center left = 0% 50% (по левому краю и по центру)
  • center = center center = 50% 50% (по центру)
  • right = right center = center right = 100% 50% (по правому краю и по центру)
  • bottom left = left bottom = 0% 100% (по левому нижнему углу)
  • bottom = bottom center = center bottom = 50% 100% (внизу по центру)
  • bottom right = right bottom = 100% 100% (по правому нижнему углу)

На практике я советую использовать цифровые значения (будь это абсолютные или относительные величины), потому что первая цифра это всегда позиция по X, а вторая по Y. А ключевые слова хоть и кажутся более понятными, но могут стоять в различной последовательности и это может ввести в заблуждение.

Фиксация фона background-attachment

По умолчанию при прокрутке web страницы в окне браузера, вместе с ее содержимым прокручивается, если есть, и фоновое изображение. Свойство background-attachment позволяет влиять на поведение фонового рисунка. Этот атрибут позволяет зафиксировать фон и запретить его прокрутку. Background-attachment может принимать следующие значения:

scroll — значение по умолчанию, которое заставляет браузер прокручивать фон вместе с содержимым страницы. Значение fixed фиксирует фон на месте, и он не будет прокручиваться.

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

Сборное правило background

Все пять рассмотренных выше правил могут быть объединены в одно сборное правило background. Значения этих пяти правил могут использоваться в любом порядке, так как они уникальны, и разделяются пробелами. А все, что вы не укажите браузер возьмет значения по умолчанию.

Например, для текущего абзаца я установил фоновое изображение в виде облака, сделал его не повторяющимся и указал расположение по центру элемента. Для этого я использовал следующее CSS правило:

background: url (//webcodius.ru/example/logo.png) 50% no-repeat;

А, например, для задания заливки цветом можно использовать одно из двух возможных CSS правил:

Больше рассказывать о настройка фона с помощью правил CSS нечего. Не забудьте подписаться на обновления блога, чтобы не пропустить выход новых статей! До новых встреч!

CSS3.com — A comprehensive CSS 3 reference guide, tutorial, and blog

CSS BACKGROUND-POSITION-X

If a ‘background-image’ is specified, this property specifies the initial position on the X-axis of the background image specified in the browser window if it is not continuously tiled in the element’s rendering box. A minimum value for this property indicates the left side of the rendering box, and a maximum value is at the right side. The Y-axis component of the background position can be specified using the ‘background’, ‘background-position’ or ‘background-position-y’ properties.

Example

div.marked <
background-image: url(watermark.jpg);
background-position-x: center
>

Possible Values

[Percentage]: Percentage is in reference to the dimensions of the box of the current element. Value specifies the percentage on BOTH the image and the canvas and may be negative (eg: 20% indicates the reference point 20% from the left side of the image is to be located at 20% from the left side of the element’s rendering box

[Length]: Represents an absolute X-coordinate position for the image and may be negative. Standard Absolute or Relative Length Units may be used here

left|center|right: Keywords representing X-axis screen positions for image placement

CSS background-position

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

Возможные значения:

left — по левому краю (для первого значения)

center — по центру

right — по правому краю (для первого значения)

top — по верхнему краю (для второго значения)

bottom — по нижнему краю (для второго значения)

проценты — для указания позиции в процентах

размер — для указания позиции в пикселях или других единицах измерения

Значение по умолчанию: 0% 0% (то же самое, что и left top )

Илон Маск рекомендует:  Как отобразить теги на веб-странице
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL