How Can I Add Background-color Behind A Transparent Background-image?

I am trying to add background-color behind my transparent background-image and it's not working. I want it in the div called 'heading'. I tried using a png file first and then a

Solution 1:

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.