Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #784617

    Please see the site link attached.

    This home page has 3 areas that utilize the “image with hotspots” feature. You will see them as you scroll down the page. Each one of these has a large product image png file that sits on top of a parallax background image pattern. Sometimes the png files in these areas do not have their transparency, and the background is white, with only a small horizontal area, about 3/4″ deep along the bottom of the image that shows the background pattern in that area. I usually will see this happen when I refresh my Firefox or Chrome browser. Once I start opening or closing my browser window, the transparency will then usually appear. I’ve tried adding this, below, to the css but it hasn’t helped –

    .av-hotspot-container-inner-wrap img, .av-hotspot-image-container, .avia-section .template-page .entry-content-wrapper, #top #main .avia-section .template-page, .av-hotspot-container-inner-wrap, .av-hotspot-container, .av-hotspot-container-inner-cell {
    background: transparent !important;


    Hey DynamicsOnline,

    I checked today in Chrome and Firefox, tried reloading the page. Did not see the issue that you described, did you get it resolved?

    If you need further assistance please let us know.
    Best regards,


    No, unfortunately it is not fixed, but the problem is intermittent. See this graphic below, this is what it looks like when the png transparency is not working –

    Notice that entire area around the product and text is white, but there is a small horizontal strip at the bottom where the background is visible. Though, that background pattern is supposed to be visible in this entire area, as the product photo is a png file with transparency.

    Please let me know if you have any ideas.


    Hi Dave,

    I got your issue wrong the first time, sorry about that. I was able to see what you mean, but after a while the background became transparent and did not change. In Firefox it the it was transparent all the time.

    The code you might use, if the issue is still there and check for ids of all parallax divs and add them to this rule as well, put this code in your child theme style.css:

    #av_section_5, #av_section_1 { background-color: transparent !important;}

    If you need further assistance please let us know.
    Best regards,


    Thank you Victoria! Your suggestion appears to have fixed the problem. I appreciate it. _D



    Glad to hear that! Thanks for using Enfold :)

    Best regards,

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.