Как поставить картинку позади уже имеющегося фона-цвета?

Question

[Nikita Titov]

Думаю скриншоты особо не понадобятся.

Из вопроса, собственно всё должно быть понятно.

Подскажите пожалуйста как это можно сделать.

Answer 1

[Мак Алексей]

background-image всегда лежит поверх background-color

background-image может иметь несколько слоёв картинок:

body{
  background-image: url('one.png'), url('two.png');
}

Как сказали archelon и Валерий, сделать один контейнер поверх другого:
codepen.io/S-ed/pen/QbXPaG

Answer 2

[Givandos]

какая цель у этого? Ведь вы цветом полностью закроете картинку.
Но а вообще, чтоб не плодить лишние теги, воспользуйся псевдоэллементом ::before у блока с фоном-цветом.
Этому псевдоэллементу задайте блочное отображение и свой фон-картинку. По сути будет то же что и с двумя блоками, как в ответах выше, но без лишних тегов. То есть меньше кода в html

Answer 3

[archelon]

наверное, только так

<div class="background_image">
  <div class="background_color">
    ... 
 </div>
</div>

Answer 4

[Валерий]

2 дива с разными z-index. В переднем фон - в заднем - картинка. Если решит проблему - могу накидать пример..

Comments

[Nikita Titov]

Я почти решил её, но можно твой пример для справки?

[Валерий]

В следующем ответе есть хороший пример, который вроде как решает твою проблему. Разобрался в нем?