Background в CSS (color, position, image, repeat, attachment) — все для задания цвета фона или фоновой картинки Html элементов

Background-position — позиционирование фона

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

Посмотрев на спецификацию CSS становится ясно, почему фоновая картинка по умолчанию прижимается именно к верхнему левому краю области Html элемента. Потому что значение «0% 0%» является умолчательным для правила background position.

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

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

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

Т.е. браузер будет рассчитывать заданные отступы по осям X и Y от начала координат области, в которой позиционируется объект, до начала координат этого самого изображения. Например, в этом абзаце я позиционировал фоновое изображение через background position с помощью следующих CSS правил:

background-image:url(https://ktonanovenkogo.ru/image/logo.png);
background-repeat:no-repeat;
background-position:400px 25px;

Т.е. значок счетчика Ливинтернет отстоит на 400 пикселов по горизонтали от левого края абзаца и на 25 пикселей по вертикали вниз от его верхнего края.

Позиционирование фоновой картинки с помощью background-position в процентах несколько отличается от описанного выше:

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

Позиция этой точки на ней теперь тоже определяется тем соотношением, которое задано в CSS правиле background-position (в нашем примере это 60 процентов от левой стороны и 40 процентов от верхнего края):

Проценты очень удобны для позиционирования, например, по центру (50% по осям X и Y) или правому краю (100% по оси X). Ведь размеры области элемента могут изменяться в зависимости от ширины области просмотра, а при использовании процентов будет изменяться и положение фонового изображения, чтобы всегда находиться либо по центру, либо по правому краю. Сделать это с помощью абсолютных единиц у вас не получится.

Можно использовать так же в background-position и комбинацию абсолютных и относительных единиц, как например, здесь:

Например, если вам нужно будет прижать картинку фона к правому краю абзаца, а сверху задать фиксированный отступ, то вполне подойдет такое CSS правило (пример смотрите в этом же абзаце):

background-image:url(https://ktonanovenkogo.ru/image/logo.png);
background-repeat:no-repeat;
background-position:100% 25px;

Т.о. осуществилось выравнивание по правому краю (правая граница фонового изображения встала вплотную к правой границе области отведенной под абзац).

В правиле с position можно также использовать слова и комбинации двух слов, которые будут определять крайние позиции. Использовать можно слова left, center, right, top, bottom, а так же их комбинации и абсолютных, и относительных цифровых значений.

Например, вот так можно задать крайние положения в позиционировании фонового изображения с помощью слов (рядом приведены цифровые аналоги, чтобы было понятнее):

Причем, можно писать как «left top», так и «top left», ибо сути это не меняет:

1. Left в комбинации означает ноль по оси абсцисс
2. Right — 100% по оси абсцисс
3. Top — ноль по оси ординат
4. Bottom — 100% по оси ординат
5. Center — 50% по обоим осям

Одиночные записи left, right, top, bottom, center подразумевают, что с ними в паре должно стоять center (или 50%), т.е. выравнивание осуществляется по центру левого, правого, верхнего, нижнего края или по центру всей области, отведенной для Html элемента, соответственно.

Хотя слова в background-position и кажутся более понятными, но на практике проще и понятнее будет использовать цифры (абсолютные или относительные — не суть важно), ибо первая цифра это всегда X, а вторая — Y. Слова же могут стоять в разной последовательности.

Что примечательно, если в этом расчудесном CSS правиле написать только одно значение, то второе будет заменено по умолчанию на 50% (середина по вертикали).

background-image:url(https://ktonanovenkogo.ru/image/rss_no_drop1.png);
background-repeat:no-repeat;
background-position:50%;
background-attachment:fixed;

background:#FEFCDE url(https://ktonanovenkogo.ru/image/logo.png) no-repeat 50%;

background-color:#FEFCDE

background:#FEFCDE