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>

Daly

You shouldn't use opacity, as it affects all descendants. You can just do background: #F0D8AB url(_images/pg_p_lewis_bckgrnd.gif) 987px 1587px no-repeat; - it should work. There is no decimals on PX-measurements, btw. Wait... you're trying to set a background image on a <div> that is not part of the rest of the content - if you want to place that div above the rest, you will have to give it a z-index as well, is my guess. Would have tested, but since you didn't use an actual url for the images, I dunno what they look like. – Zeigler

thanks. I did use a z-index on the content div that follows the background div & added that to my code above. When I replaced my background property with what you provided, the color came through but my transparent image is now not showing, How do I provide an "actual url" for the images so someone can test it out (new at this). Thanks. – Daly

You would need to have your images uploaded (or on a server somewhere) and link to them using the full URL in the code. If they're available on a server, just replace the links with direct http:// links to their actual location. – Zeigler

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.

Idle

thank you. but now there is no ability to control the opacity of the image through css, is there? I have to do that in the image itself. i don't know photoshop though i am learning adobe lightroom. ideally i would like to be able to control the opacity through css and have a background color both. is there any way to achieve that? – Daly

Not exactly, but you can play around with background-blend-mode property with different shades of gray for background-color property in #heading section to get a similar result. – Idle

thanks, but I don't want gray, but sepia/tan. so there is no way to have a transparent background-image which can be controlled using css over a colored background? i find this very strange. – Daly

You can change the opacity of background-image by adjusting alpha channel of the rgba background color. See this fiddle. – Idle

thank you. I re-posted my code per your suggestion and deleted the answer I posted yesterday. Now the problem I am having is that the background-image and color changes opacity but the text and the 1st floral icon to the left of the text are also changing opacity. Only the 2nd floral icon to the right of the text is non-transparent. Can you see what is causing my text ("Lewis") & the 1st floral icon to be opaque? Thank you. – Daly

Also, can the opacity of the background-color and that of the background-image be controlled independently of each other? – Daly

Disregard the prior 2 comments. Your solution worked perfectly. I used the background-blend-mode with the rgba instead of the :before psuedo element. I copied and pasted the code to the original post because I don't think you can add code to comments. I'm not sure if this is customary (if you're supposed to change the code that you initially posted). Many thanks for solving this problem. – Daly