3

I am trying to assign a background-image and a background-color to a div. There are many SO answers (like this) with the solution to either combine them in background:

background: rgba(255,0,0,0.5) url('http://placehold.it/100x100');

Or use separate properties:

background-color: rgba(255,0,0,0.5);
background-image: url('http://placehold.it/100x100');

Neither of the above are working for me (tested in Firefox and Chrome) - I breifly see the correct background color and then it disappears and all that is left is the image. What does work for some reason is:

 background: linear-gradient(to bottom, rgba(255,0,0,0.5) 0%, rgba(255,0,0,0.5) 100%), url('http://placehold.it/100x100');

Any idea why these solutions are not working?

UPDATE To better clarify what I am looking for: The color of the div is constantly changing, so I need to be able to dynamically and easily update an inline style with javascript. I was hoping there was a simple solution (as there was in 2011) using the standard background properties. If not, I'll set a linear gradient. It is a bit clunky, but it seems to work fine.

UPDATE2 In the end, I discovered that setting a gradient to the background-image was 3 times slower than setting a background-color property. Because this was part of a color picker, it created an unacceptable lag with mouse movement. I ended up using nested divs and keeping the image constant in the outer div and changing the color in the inner div.

Here is a demo:

#div1 {
  height: 100px;
  width: 100px;
  background-color: rgba(255,0,0,0.5);
  background-image: url('http://placehold.it/100x100');
}

#div2 {
  height: 100px;
  width: 100px;
  background: linear-gradient(to bottom, rgba(255,0,0,0.5) 0%, rgba(255,0,0,0.5) 100%), url('http://placehold.it/100x100');
}
<div id="div1">
</div>

<div id="div2">
</div>
Community
  • 1
  • 1
mseifert
  • 5,390
  • 9
  • 38
  • 100
  • User @l3fty below made the comment "`You can't use image and color in same element.` That's not entirely true. You can use both but if the image is the same width and height as the div, the color won't show through as it's behind the image." Presuming l3fty is correct in this assertion, an image that is a PNG with opacity already built in might work for what you are attempting to do. – Alexander Nied Mar 20 '17 at 04:33
  • @anied - I've update the question to show what I am trying to do with the solution (dynamically changing colors using js with a fixed image). Thanks for the comment. – mseifert Mar 20 '17 at 04:43

2 Answers2

2

try this code

.background {
    background:url('http://placehold.it/100x100');
    position: relative;
    height: 100px;
  width: 100px;
}

.layer {
    background-color: rgba(75, 86, 160, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
<div class="background">
    <div class="layer">
    </div>
</div>
Amal
  • 3,398
  • 1
  • 12
  • 20
  • While this didn't answer the question of how to set both the background-color and background-image on the same control, I ended up using nested divs due to performance – mseifert Apr 02 '17 at 19:05
1

You may use,

#div1 {
 width: 100px;
 height: 100px;
 background: url('http://placehold.it/100x100') center center no-repeat;
 background-size: cover;
 }

 #div1:before {
   content: '';
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: rgba(255,0,0,0.5);
 }
LIJIN SAMUEL
  • 883
  • 4
  • 12
  • `You can't use image and color in same element.` That's not entirely true. You can use both but if the image is the same width and height as the div, the color won't show through as it's **behind** the image. – l3fty Mar 20 '17 at 04:29
  • The color of the div is constantly changing, so I need to be able to dynamically and easily update an inline style with javascript. The solution I posted of using gradients is going to be better. Based on past answers, I was hoping there was a solution using the standard background properties. Looks like they've modified the specs since the answers were posted in 2011. Thanks for your answer. – mseifert Mar 20 '17 at 04:37
  • yes you are right, it will shows both but image will appear behind the image. Thanks for the comment. – LIJIN SAMUEL Mar 20 '17 at 05:20