Question

I’m having a bit of an issue with some CSS.

In the main content section I am using a background image, within that image is a transparent element which shows the background below it. This is fine and does what I want.

The issue is that I want to also specify a background colour so that if the content is longer than the image then the background continues. However, if I add a colour to the background, I lose the transparent part of the background image.

Is there a way to use both a transparent background and a solid colour on the same div but have the colour position be lower than the transparent part?

Here is the background with the transparent element showing the background underneath:

And I’m trying to avoid this, the sidebar is longer than the main content so the background ends early:

Answer 1

I solved this just by making the background image stupidly long instead.

Not a great option as I would prefer to keep image assets minimal, but it will do.