Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • August 24, 2022 at 7:19 pm #1362672
    welswebmaster

    Hi Enfold team,
    Here’s a troublesome issue for us:
    Main is set with background image (top right; no repeat; fixed) and Main also has has a background color of #fbfaf3.
    My color section’s setting for background color is set to Main with background color setting of transparent using the color picker (rgba(0,0,0,0)0).
    I’ve assigned a custom CSS class to my color section of: jd-container-bg3
    My Quick CSS is set to:

    #main.jd-container-bg3 {
background-color: transparent !important;
}

    However, the result is that the color #fbfaf3 (Main background color) appears behind my color section’s transparent background rather than the transparent background image (the cornerSeal.png). See private for view of this. I only need this change to this one color section (page-item-1493).
    I’ve also tried changing .main_color and it didn’t work. It changes the background to white. I can change to a test color like RED but not successfully to transparent with all the CSS I’ve played with.
    How can I get this to work so that the MAIN background image appears behind the transparent skyscraper image?

    Thanks for your support!

    • This topic was modified 2 years, 3 months ago by welswebmaster. Reason: assigned images to heading in private
    August 25, 2022 at 6:08 am #1362706
    Nikko

    Hi Julie,

    Please try adding this CSS code in Enfold > General Styling > Quick CSS:

    .page-id-1493 #av_section_1 {
    background-color: transparent;
    margin-top: -96px;
    position: relative;
}

    Best regards,
    Nikko

    August 25, 2022 at 1:17 pm #1362787
    welswebmaster
    This reply has been marked as private.
    August 25, 2022 at 2:39 pm #1362792
    Guenni007

    sorry – right answer to wrong post ;)

    August 25, 2022 at 5:12 pm #1362817
    welswebmaster

    Nikko? please see my latest response above. Thanks.

    August 26, 2022 at 3:07 pm #1362890
    Nikko

    Hi welswebmaster,

    Thanks for posting the link to the live site, you can use this CSS:

    .page-id-18 #av_section_3 {
    background-color: transparent;
    margin-top: -96px;
    position: relative;
}

    If you need to use this on other pages, just let us know and we’ll provide a solution that should work in different pages.

    Best regards,
    Nikko

    August 29, 2022 at 3:35 pm #1363056
    welswebmaster
    This reply has been marked as private.
    August 30, 2022 at 7:16 pm #1363297
    Mike

    Hi,
    Try adding this css:

    #main {
    background: #fbfaf3 url(https://hmfull10010.wpengine.com/wp-content/uploads/2022/08/newBakSealCornerRight.webp) top right no-repeat fixed;
}

    Best regards,
    Mike

    August 30, 2022 at 7:31 pm #1363299
    welswebmaster

    Bingo! That was it. I kept Nikko’s CSS as well to get it to work. Thanks Nikko and Mike. 5 stars for you both! That one was tricky!

    August 31, 2022 at 2:31 am #1363310
    Mike

    Hi,
    Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Color Section transparent image background color’ is closed to new replies.