Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #605211


    Please see our website.

    Note that our landing page features a slider with 4 large images ending with an image that says “MOBILE FINANCE FOR RURAL COMMUNITIES.” We are trying to match the green background color of this 4th slider image to the green header background color above. As you can see it doesn’t match.

    We set the header color to #00ad51 in General Styling / Logo Area Background Color. We also set the color of the green background image to #00ad51. However, as you can see, the header is displaying a different color than the background image and it does not appear to be #00ad51. We have tried saving the background image as PNG and JPG and it still doesn’t seem to match.

    Please advise how to make these two colors match.

    Thank you.




    Hi Michael!

    Thanks for getting in touch with us!

    I have visited your site and was not able to see the difference in color between the 4th slide and the header background. Please look at the screenshot I have attached. Try clearing your browser’s cache and then viewing your site again. If you are still having the issue, please post a screenshot here showing exactly what you are seeing.

    Looking forward to hearing your reply.

    Best regards,


    Hi Jordan,

    Thank you for the quick response. I am guessing that you are viewing our website on a PC. You can still see a very small difference between the header and body on a PC but on a Mac, the difference is much greater. See my Mac screenshot.





    I’m sorry but we don’t have permission to view the screenshot. Please try imgur instead. I checked the site and the header and the 4th slide have the same background color. This is the header’s css:

    .header_color .header_bg, .header_color .main_menu ul ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow, .header_color .avia_mega_div, .header_color .av-subnav-menu > li ul, .header_color .av-subnav-menu a {
        background-color: #00ad51;
        color: #ffffff;

    It is set to #00ad51. The only thing I noticed is the border between the header and the main container which is set to #e1e1e1. Add this in the Quick CSS field to change the color:

    .avia-layerslider {
        border-color: #00ad51;



    Sorry, sent you the wrong link. Please try this.

    Thank you for the Quick CSS on the border. We have applied it. But, despite the fact that the CSS shows the same hex code, the colors still render differently on a Mac. See screenshot.



    What if you remove the default bg image then set the background as hex value?

    Remove this image:

    Create a layer, set it to HTML / Video / Audio type. Add this code:

    <div class="bg-layer" style="background: #00ad51; display: block; position: absolute; width: 5000px; height: 500px;"></div>



    Brilliant. This worked perfectly. Thank you.



    Great, glad we could help :-)


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