background-position-y в 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

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

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

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

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

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

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

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

Фон в 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 — полную прозрачность.

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

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

Is background-position-x (background-position-y) a standard W3C CSS property?

I’m worried about background-position-x and background-position-y . Gecko (Firefox) and Presto (Opera) don’t support them, but Webkit (Chrome, Safari) does.

Does anyone know (with official references) if this is (or will be) included in the standard?

3 Answers 3

background-position-x and background-position-y are now part of the level 4 of Backgrounds and Borders standard.

RESOLVED: background-position-x/-y, background-repeat-x/-y approved for level 4 of backgrounds and borders.

Splitting background-position into -x and -y was proposed for CSS 3 but it got rejected as the working group “considered the use case too weak to introduce new properties for.” Additionally, there seemed to be some ambiguity concerns with multiple background images and CSSOM, the API behind CSS. I’m not sure how WebKit and Trident did implement them and how they addressed these concerns.

The CSS WG blob has just reported yesterday that there will be “no change to background-position or transform-origin syntaxes.” The reason is probably due to not getting any further delays.

Maybe it will get added to CSS 4. There is a current thread on the www-style@w3.org mailing list that you might find interesting.

Update So apparently these properties have been approved for CSS 4 (see [CSSWG] Minutes Telecon 2014-04-16):

RESOLVED: background-position-x / -y , background-repeat-x / -y approved for level 4 of backgrounds and borders.

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.

CSS стиль background-position. Правила позиционирования фона

CSS стиль background-position задает фонового изображения, установленного с помощью CSS свойства background-image. Настольные Мобильные

Internet Explorer Chrome Opera Safari Firefox
4 9 1 10.5 1.3 3.6
Android Firefox Mobile Opera Mobile Safari Mobile
2.1 1 10 3.2

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

Internet Explorer ниже 9й версии позволяет использовать только одно фоновое изображение.

Краткая информация по CSS-свойству background-position

Значение по умолчанию 0% 0%
Наследуется Нет
Применяется К блочным элементам

Правила написания свойства background-position

Здесь «позиция» — положение фонового изображения по горизонтали и вертикали. Кроме использования ключевых слов (left, center, right, top, center, bottom), положение можно задавать в процентах, пикселях или других единицах. Если используются ключевые слова, то порядок их следования не имеет значения. При записи значения в процентах, или пикселях вначале задается положение изображения по горизонтали, а затем, через пробел, по вертикали.

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

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

Объектная модель

Пример применения CSS-стиля background-position

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

Применение свойства background-position для единичного фона

Теперь, предположим, у нас два фона, один из которых будет справа, а другой — слева. Вот, как будет выглядеть наш код:

Применение свойства background-position к нескольким фоновым изображениям

Фон в 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 нечего. Не забудьте подписаться на обновления блога, чтобы не пропустить выход новых статей! До новых встреч!

background-position

Описание

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

background-position
Значения: background-position: позиция | inherit
Начальное значение: 0% 0%
Область применения: блочные элементы
Наследование: нет
Поддержка браузерами: основные значения Internet Explorer 8+, Chrome 1+, Opera 3.5+, Safari 1+, Firefox 1+, Android +, iOS +
Поддержка браузерами: многослойные фоны Internet Explorer 9+, Chrome 1+, Opera 10.5+, Safari 1.3+, Firefox 3.6+, Android +, iOS +
Синтаксис JavaScript object.style.backgroundPosition=»center»
Примечание:

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

Синтаксис

где позиция — одно из поддерживаемых значений.

Значения

background-position позволяет задавать положение фонового рисунка по горизонтали и по вертикали. В качестве значений могут выступать как ключевые слова так и точные значения, указанные в пикселях или процетах. Для указания положения по горизонтали используются следующие ключевые слова: left , center и right . Для положения по вертикали — top , center и bottom .
Свойство background-position может принимать следующие значения:

left top Начальное положение фонового изображения в верхнем левом углу (0% 0%) left center Начальное положение фонового изображения по левому краю и по центру (0% 50%) left bottom Начальное положение фонового изображения в левом нижнем углу (0% 100%) right top Начальное положение фонового изображения в верхнем правом углу (100% 0%) right center Начальное положение фонового изображения по правому краю и по центру (100% 50%) right bottom Начальное положение фонового изображения в правом нижнем углу (100% 100%) center top Начальное положение фонового изображения по центру вверху (50% 0%) center center Начальное положение фонового изображения по центру (50% 50%) center bottom Начальное положение фонового изображения по центру внизу (100% 100%) x% y% Указыватеся начальное положение фонового изображения в процентах. Первое значение x% — по горизонтали, второе y% — по вертикали. x y Указыватеся начальное положение фонового изображения в других единицаю. Первое значение x — по горизонтали, второе y — по вертикали. inherit Наследует значение родительского элемента

Если указано только одно ключевое слово, второе будет восприниматься как center (50%).
Можно комбинировать значения, указанные в % и других единицаю.

Как правильно отцентрировать background?

Как правильно отцентрировать background?
Необходимо по ширине сделать — 960px,
по высоте — неограниченно (или максимум)
— фон

и сама картинка, чтоб была взята по центру.
заранее спасибо!

  • Вопрос задан более трёх лет назад
  • 1834 просмотра

За позиционирование отвечает свойство

Я не до конца понял про размеры, но за размер отвечает свойство

Помимо этого, у background-size есть два специальных значения: cover и contain

cover — масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. (Делает так, чтобы блок всегда был заполнен фоном)
contain — масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

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