Transparent Background Image

how can I add background-color behind a transparent background-image?

You can do this by using the pseudo element :before

See it in this fiddle

#heading {
  background-image: url(https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);
  background-repeat: no-repeat;
  position: relative;
  height:100%;
  height: 300px;
  width: 960px;
}
#heading::before {
  background-color: rgba(240, 216, 171, 0.25);
  display: block;
  content: '';
  position: absolute;
  height: inherit;
  width: inherit;
}

Here, since you need it for header element, the header is used instead of a separate background div. Notice that :before element is placed with absolute positioning and actual element is placed relative to that. Background color is applied to the before element and header with background mage is rendered over it.

Edit 1

Instead of using :before, we can use background-blend-mode:screen to control the opacity of background-image and using background-color.

See it in this fiddle.

The alpha channel of rgba background-color can control transparency of background-image.

#heading {
  background-image: url(https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png);
  background-repeat: no-repeat;
  background-blend-mode: screen;
  background-color: rgba(255, 230, 184, 0.66);
  position: relative;
  height:100%;
  height: 300px;
  width: 960px;
}

I used google logo since the image source path you provided is relative to your page.

Draw image with transparent background on canvas

Your code works perfectly - you just need an image with a transparent background - like this question mark:

var can = document.getElementById('canvasId');var ctx = can.getContext('2d');

ctx.fillRect(50,50,500,500); // something in the background
var img = new Image();img.onload = function() {    ctx.drawImage(img, 0, 0);}img.src = "https://i.stack.imgur.com/RPEQQ.png"; //transparent png

<canvas id="canvasId"></canvas>

Background image transparency in DIV

Use opacity on the background div inside of the wrapper element.

.page {  position: relative;  width: 100px;  height: 100px;}.page::before {  content: '';  display: block;  position: absolute;  width: 100%;  height: 100%;  background:  url('http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg');  opacity: 0.2;  z-index: -1;}.box {  display: inline;  background: red;}

<div class="page">  My page  <div class="box">Red box</div></div>

Creating an Opaque / transparent gatsby-background-image

The opacity of the background image itself is set in the :before pseudoselector of your background container, so you will need to create a selector which include your background image container and accessing directly to you :before, of course, you'll need to use !important in that case... Something like:

.bgImage::before{
 opacity: .03 !important;
}

You can override completely the styles by replacing the :after pseudoselector too by:

.bgImage::after{
 opacity: .03 !important;
}