Applying Color for Background Image in Div

Question

I'm developing this website and I am facing a problem with background images. While I was googling, I learned I could do this:

.tinted-image {
    background: 
        linear-gradient(rgba(255, 0, 0, 0.45)),
        url(image.jpg);
}

but somehow I can't do this:

.tinted-image { //Defining color and image differently
    background: 
        linear-gradient(rgba(255, 0, 0, 0.45)),
    background:
        url(image.jpg);
}

Because of my program, I can't use the first code, and I have to define the background-color and the image differently (hovering and stuff). Is there any way to do it the second way? Or could I achieve this with Javascript?

why can you not use the 1st, the 2nd is not possible because you cannot append values, they just replace with what ever the last defined value is. — Wobbles, Apr 02 '15 at 14:54
I want to change the tint of the image when the image is hovered. Also, I'm importing the image URL from an `.xml` file so I can't hardcode the url into the css. — Tetsudou, Apr 02 '15 at 14:55
You are 'hardcoding' the url either way, unless you are creating the CSS through JS or similar, and in that case you can just as easily create the entire class rule. Just make a new class that handles the .tinted-image:hover — Wobbles, Apr 02 '15 at 14:59
[This looks like what you're looking for][1] [1]: http://stackoverflow.com/questions/8049276/can-you-overlay-a-transparent-css3-gradient-over-a-background-image — Clive_Bigsby, Apr 02 '15 at 14:59
Unrelated to the question, but calendar is spelled with an a. — riv, Apr 02 '15 at 15:11

score 1 · Answer 1 · answered Apr 02 '15 at 14:54

1

The second background declaration will overwrite the first. What you're looking for is background-image and background-color.

answered Apr 02 '15 at 14:54

Matt

311
1
7

`linear-gradient(rgba(255, 0, 0, 0.45))` is for tinting the image, not coloring the div. I don't think it's possible to tint the `background-image` with `background-color`. – Tetsudou Apr 02 '15 at 14:59
@Tetsudou There is no difference, all you are doing is overlaying backgrounds, not affecting the images tint. – Wobbles Apr 02 '15 at 15:03
Yes, but `linear-gradient` defines an image, so you can't use it as a value for `background-color` property. – riv Apr 02 '15 at 15:04
@riv but you can you it inside nested divs as the answer says – Wobbles Apr 02 '15 at 15:05

Wobbles · Accepted Answer · 2015-04-02T15:21:28.437

1

.tinted-image {
    background: 
        linear-gradient(rgba(255, 0, 0, 0.45)),
        url(image.jpg);
}

Is perfectly valid, just missing some browser compatibility fallback. If you only wish it to "tint" on mouse over; which is simply an alpha blended overlay not an actual tint, simply create a :hover pseudo for it.

.tinted-image {
    background: 
        url(image.jpg);
}
.tinted-image:hover {
    background:
        linear-gradient(rgba(255, 0, 0, 0.45)),
        url(image.jpg);
}

Another perfectly acceptable method would be to use nested divs to create the overlay effect

<div class="imgDiv">
  <div class="overlayDiv"/>
</div>

-

.imgDiv {
    background: 
        url(image.jpg);
}
.overlayDiv:hover {
    background:
        linear-gradient(rgba(255, 0, 0, 0.45));
}

edited Apr 02 '15 at 15:21

answered Apr 02 '15 at 15:08

Wobbles

3,033
1
25
51

You don't need image in the `overlayDiv`. Also, you might want to explicitly set its size, otherwise it would have 0 height. – riv Apr 02 '15 at 15:14
Correct on the first count, and I left size out because he has it left out in his example, I assume he is implicitly setting it somehow. – Wobbles Apr 02 '15 at 15:22

Applying Color for Background Image in Div

2 Answers2