Как задать позиционирование для background-image?

Question

[artekha]

У меня есть две картинки, которые нужно задавать через background, а итоге должно получиться следующее:
Фиолетовым выделены эти две картинки. Проблема вот в чем: я не знаю как выровнять картинку с иконками так как в макете, потому что если задавать отступ от левого края, то при изменении ширины экрана все будет криво.
Можно ли задать background-position для этой второй картинки, как то относительно центра, типа center - 300px
Вот css:

background: url('../images/footer_scattered_icons.png') (center - 300px) bottom no-repeat, url('../images/join_page_footer_bg.png') bottom right no-repeat;

Answer 1

[GreatRash]

.elem {
  background-position: 50% 50%; /* старые браузеры поймут только это */

  /* IE9+ */
  background-position: -webkit-calc(50% - 300px) 50%;
  background-position: calc(50% - 300px) 50%;
}

Answer 2

[Сергей Горячев]

Мне кажется, картинка с логотипами не должна быть фоном.
И даже если её сделать фоном, то у отдельного блока, а не у общего.

С ней удобней работать будет, если она будет блоком. И для адаптивности, и для выстраивания.
А что касается длинной картинки, там просто

background-position: 50% 100%

Что-то вроде такого https://jsfiddle.net/webirus/cd3f148r/

(за исключением background-size: contain )

Или вообще сделать через псевдоэлемент для wrapper.
Тогда еще проще получится.