Site logo

[Resolved] Adding background color to images

Home Forums Support [Resolved] Adding background color to images

Home Forums Support Adding background color to images

  • This topic has 8 replies, 2 voices, and was last updated 5 years ago by Elvin.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1682710
    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?

    #1682768
    Elvin
    Staff
    Customer Support

    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.

    #1682771
    Praveen

    Hi,

    Added. These are simple jpg images.

    #1682807
    Elvin
    Staff
    Customer Support

    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.

    #1682817
    Praveen

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

    #1682829
    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.

    #1682859
    Elvin
    Staff
    Customer Support

    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.

    #1682863
    Praveen

    Got it. Thanks a lot here.

    #1686000
    Elvin
    Staff
    Customer Support

    No problem. 🙂

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.