CSS Background color transparency and image

Question

I'm editing a Drupal website, but I don't have access to html files, I only can modify CSS.

I need to put some kind of filter on an image background, because without the filter the text on it can't be read.

I tried the following css lines:

.class{background: url(image.jpg) rgba(242, 244, 255, 0.73);}


.class{background: rgba(242, 244, 255, 0.73) url(image.jpg);}


.class{background-image: url(image.jpg); background-color: rgba(242, 244, 255, 0.73)}

But none of these worked. How should I do it?

Not sure of what are you asking. I'm trying to modify the entire "header" css:

[Here logos and menu]

[Here page header text] — Lakatoi, Feb 09 '21 at 22:24
Try adding blend mode like : background-color: red; background-blend-mode: screen. Just probably check browser support for this one. — MarLMazo, Feb 09 '21 at 22:28

score 0 · Accepted Answer · answered Feb 09 '21 at 22:35

Background image is always drawn over background color, so that's why the combinations you have tried so far don't work.

Furthermore, although you can specify multiple background images to be layered over each other in modern browsers, you cannot specify multiple colors.

An amusing little trick is to use a single-color gradient as an extra "image" for a color overlay:

.content {
  width: 100%;
  height: 100%;
  height: 100vh;
}
.content {
  /* note: images are specified front-to-back */
  background-image: 
    linear-gradient(0deg, rgba(242, 244, 255, 0.73), rgba(242, 244, 255, 0.73)),
    url(https://www.gravatar.com/avatar/755f6bc8dad0c329cc4dd6d8844ab907?s=128&d=identicon&r=PG&f=1);
}

<div class="content">Hello!</div>

CSS Background color transparency and image

1 Answers1