[Resolved] Adding background color to images

[Praveen]

Hi guys,

I am not sure if this falls under support or not. If not, please excuse me.

I am trying to achieve something like in the link below.

As you can see there is an image and then when its shown on the website, a grey background is added to it.

Will you have some tips for me to achieve this?

[Elvin]

Hi there,

Can you link us to the page where you want this applied?

So we could check for an approach on how to apply this to your site.

Let us know.

[Praveen]

Hi,

Added. These are simple jpg images.

[Elvin]

Try adding this CSS:

figure:before {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: radial-gradient(ellipse at center, rgba(15, 42, 46, 0.05) 0, rgba(15, 42, 46, 0.1) 41%, rgba(15, 42, 46, 0.3) 100%);
    opacity: 0.2;
    transition: opacity 0.5s ease;
    border-radius: 6px 6px 0 0;
    z-index: 1;
}

Note: Make sure to change the width of the image block element instead of using a fixed width of 390px if you want it to go full width of the container.

[Praveen]

Thanks, but can you please guide, how to use it? Where Do I need to put this? Under Additional CSS ?

[Praveen]

Hi,

Included it in Additional CSS.

Some pages, its coming fine, but in some, it comes at odd location as you can see in attached link.

[Elvin]

It’s to be added in Additonal CSS on your customizer.

The CSS was written for the image blocks with captions on the page you’ve linked. It’s not exactly written for everything else.

It’s quite tricky to write a “one-style-fit-all” styling for all the images when their HTML structures are not uniform.

Consider arranging/editing all the content image blocks in a more uniform manner so we could style it better.

[Praveen]

Got it. Thanks a lot here.

[Elvin]

No problem. 🙂

[Author]

Posts