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

Question

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 gif file. I thought all gif's were transparent images. Any help would be appreciated.

#heading {
    background-image: url(http://bartonlewis.com/_images/pg_p_lewis_bckgrnd.gif);
    background-size: 978px 1587px;
    background-repeat: no-repeat;
    background-blend-mode: screen;
    background-color: rgba(255, 230, 184, 0.56);
    position: relative;
    height:100%;
    height: 230px;
    width: 960px;
    }
#content {
    float: left;
    height: 1800px;
    width: 960px;
    font-size: 1.1em;
    line-height: 1.2em;
    z-index:1;
    position:relative;
    }
div#heading p {
    font-size: 72px;
    text-align: center;
    margin: 100px 0;
    letter-spacing: 2px;
    }
#colD {
    width: 320px;
    float: left;
    text-indent: -999px;
    }
#colE {
    width: 30px;
    float: left;
    }
#colF {
    width: 250px;
    float: left;
    text-align: center;
    letter-spacing:.1em;
    font-family: "amador"; 
    font-variant: normal;
    font-size: 1.5em;
    }
#colG {
    width: 10px;  
    float: left;
    }
#colH {
    width: 350px;
    float: left;
    }
.floral-icon {
    vertical-align: middle;
    }
#colG img {
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

    <div id="background">
    </div>
        <div id="content">
            <div id="heading">
                <div id="colD">empty</div>
                <div id="colE"><p><img class="floral-icon" src=http://bartonlewis.com/_images/pg_p_lewis_icon.png width="32" height="32"></p></div>
                <div id="colF"><p>Lewis</p></div>
                <div id="colG"><p><img class="floral-icon" src=http://bartonlewis.com/_images/pg_p_lewis_icon.png alt="floral icon" width="32" height="32"></p></div>
                <div id="colH"></div>
            </div>

Answer 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.