CSS: background image on background color

Solution 1:

You need to use the full property name for each:

background-color: #6DB3F2;
background-image: url('images/checked.png');

Or, you can use the background shorthand and specify it all in one line:

background: url('images/checked.png'), #6DB3F2;

Solution 2:

For me this solution didn't work out:

background-color: #6DB3F2;
background-image: url('images/checked.png');

But instead it worked the other way:

<div class="block">
<span>
...
</span>
</div>

the css:

.block{
  background-image: url('img.jpg') no-repeat;
  position: relative;
}

.block::before{
  background-color: rgba(0, 0, 0, 0.37);
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  width: 100%;
}