Background color over a background image

I Need Help
1

Hey is there a native way with the class manager to add an image with a color overlay?
Or do I have to add a style to the header of the page and add the CSS there?

background: linear-gradient(rgba(25,135,84,0.5) 0%, rgba(25,135,84,0.5) 100%), url("image.jpeg") center / cover;

I tried to find an answer in the documentation and the search function. If there is a possibility, could you point me in that direction?

Many thanks!
Seb

2

Yes. With classes and Pseudo elements.

Say you add a class to your image

.myimage

Set the position to relative.

Then in the class editor make another class called

.myimage::after or .myimage::before

Set the position to absolute, height and width to 100% or use positioning. Then set a BG gradient.

2 Likes
3

That worked, thanks a lot! I’ll save your explanation. I never used pseudo elements for that, just the code I used a above. Thanks for you showing me this way.

1 Like
4

One follow-up question: The color overlay is pushed 20px to the right side by the ‘bloc’ class which seems automatically generated. Thus the color is misaligned. Have an idea why?

grafik

5

Fixed it with -20px on the pseudo class. Still do not know why its happening. Any insights?

6

Looks like Blocs is adding some padding. In full screen there’s 20px top/bottom.
Kapture 2021-10-27 at 17.01.49

7

It’s working if you add a minus margin via a class. Is this intended, that blocs adds its own padding? @Norm
I think an color overlay over an image would be a nice addition. It can added in one css function see the code I used before using blocs :slight_smile:

8

Oh it’s a background image on a bloc.

Did you set the pseudo class with positions of 0 top, bottom, left, right?

Because it really depends on the case to how you are using CSS. But positions will work without playing around with margins and padding.

10

Did you set the pseudo class with positions of 0 top, bottom, left, right?

I fixed it and it works without messing around with the margins. Many thanks! Learned something again.

Oh it’s a background image on a bloc.

Exactly. I think it would be easier to add a color overlay than creating classes for it, but it works at least. Thanks :slight_smile: