С помощью какого свойства вставить картинку?

Question

[Raul Abdullin]

Имеются цветные фоны, на них располагаются png картинки коробок.
Эти коробки с помощью background-image лучше делать?
И как позиционировать?

Comments

[Ankhena]

https://webref.ru/css/background-position
https://webref.ru/css/background-size
ну и заодно все остальные свойства начинающиеся на background-

[Raul Abdullin]

Ankhena, спасибо большое :)

[Ankhena]

raulvodov, вы потом, если что, код на jsfiddle.net выкладывайте

Answer 1

[Shadowman69]

Да, лучше через background, сначала картинку, потом позиционирование по оси X и Y, потом задаете цвет, будет выглядить примерно так:

background: url('images/image_name.png') no-repeat 70%  50%, 
          #f4f4f4;

Когда будете делать адаптив, и картинка будет заходить под текст, что возможно ухудшит его читабельность, то просто переписываете свойство background без картинки
background: #f4f4f4;
Через кому Вы можете делать столько бекграундов, сколько пожелаете, каждый из своим позиционированием и значением для рэпита, просто помните, цвет указываете самым последним)))

Comments

[Ankhena]

просто помните, цвет указываете самым последним

или с нижней картинкой:

background:
    url('images/image_name.png') no-repeat center/ 50% 50%,
    #f4f4f4 url('images/image_name2.png') no-repeat 70%  50%;

[Raul Abdullin]

спасибо большое

[Shadowman69]

Ankhena, можно и так)