CODEWITHSUNDEEP
htmlcss
dargmuesli
dargmuesli

Reputation: 642

Combine background image with rgba but without gradient

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.

Upvotes: 3

Views: 998

Answers (1)

vals
vals

Reputation: 64194

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

Upvotes: 1

Related Questions