3

Is it possible to combine a background image with a rgba color without using a rgba gradient?

Currently my css3 style looks like this:

html
{
    background: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
    url("../icons/sombrero.jpg")no-repeat center center fixed;
}

But I imagine something like this:

html
{
    background:rgba(0, 0, 0, 0.75),
    url("../icons/sombrero.jpg")no-repeat center center fixed;
}

The rgba color should lay above the image. I got the gradient-'hack' from here. I search for an alternative to the gradient technique, no box-shadow trick.

Community
  • 1
  • 1
dargmuesli
  • 612
  • 10
  • 20
  • http://jsfiddle.net/yak613/ggwgz94s/ separately they work fine, together they don't work at all. i think it has to do with using an image: `background-image` and a color: `background` in the same context. `linear-gradient` works with background-image. But what's wrong with what you have now? I can't see anything wrong with it. The colors look great. :) – yaakov Jun 05 '15 at 15:39
  • 2
    @yak613 it is because you can't place a background color over a background image. The reason the gradient worked is because it is rendered as a background image :D – Jacob G Jun 05 '15 at 15:41
  • Either use `box-shadow` or an pseudo element. Both are pretty simple. – Jacob G Jun 05 '15 at 15:42
  • there was an answer to that effect just a minute ago. got deleted...http://jsfiddle.net/yak613/ggwgz94s/ this was the code he tried. – yaakov Jun 05 '15 at 15:43
  • It just annoys me that even in css3 you still need these 'hacks' to perform such simple tasks. It would be far more convenient and logic to use my 2nd example, wouldn't it? – dargmuesli Jun 05 '15 at 15:44
  • possible duplicate of [CSS color background over image](http://stackoverflow.com/questions/26632630/css-color-background-over-image) – Jacob G Jun 05 '15 at 15:44
  • @JacobGray No, the gradient technique isn't even named once there... – dargmuesli Jun 05 '15 at 15:55
  • Could you not put the image on the `html` and the color on the `body`? - http://jsfiddle.net/rk1v1y1u/ – Paulie_D Jun 05 '15 at 16:01
  • @Paulie_D No, because the body cannot be width & height 100% in my case. – dargmuesli Jun 05 '15 at 16:05
  • I only used the 100% as an indication. I'm curious to see what it is you are trying to do...do you have a design image we could see. That said, there is a solution you just don't like it. :) – Paulie_D Jun 05 '15 at 16:07
  • Currently my project is private. I have also thought about this way to handle the problem, but now I decided to use a completely different technique (/ layout). Have a look at @vals answer. That is an answer I was hoping for. But thank you very much for your comment! :) – dargmuesli Jun 05 '15 at 16:17

1 Answers1

1

It will be possible probably in the future.

from the w3c draft:

For example, one can use this as a simple way to "tint" a background image, by overlaying a partially-transparent color over the top of the other image: 

background-image: image(rgba(0,0,255,.5)), url("bg-image.png");

background-color does not work for this, as the solid color it generates always lies beneath all the background images.

w3c documentation

vals
  • 61,425
  • 11
  • 89
  • 138