Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Combine background image with rgba but without gradient

Tags:

html

css

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.

like image 967
dargmuesli Avatar asked Dec 18 '25 12:12

dargmuesli


1 Answers

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

like image 154
vals Avatar answered Dec 21 '25 04:12

vals



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!