@artekha

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

У меня есть две картинки, которые нужно задавать через background, а итоге должно получиться следующее: b9a217184e564c26956f3db6b1276d14.png
Фиолетовым выделены эти две картинки. Проблема вот в чем: я не знаю как выровнять картинку с иконками так как в макете, потому что если задавать отступ от левого края, то при изменении ширины экрана все будет криво.
Можно ли задать 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;
  • Вопрос задан
  • 1268 просмотров
Решения вопроса 1
@GreatRash
.elem {
  background-position: 50% 50%; /* старые браузеры поймут только это */

  /* IE9+ */
  background-position: -webkit-calc(50% - 300px) 50%;
  background-position: calc(50% - 300px) 50%;
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
webirus
@webirus
Тыжверстальщик! Наверстай мне упущенное...
Мне кажется, картинка с логотипами не должна быть фоном.
И даже если её сделать фоном, то у отдельного блока, а не у общего.

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

background-position: 50% 100%

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы