1. NEW YEAR SALE Be a Pro Member @ $99 / lifetime & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed.Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color.
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved Removing dark overlay from picture in hero section of layout pack

Discussion in 'Basic Support Forum' started by Francois Mottaz, Jan 21, 2021.

  1. Francois Mottaz

    Francois Mottaz New Member
    Divi Ultimate Header Plugin

    I am new to Divi and started by using a layout pack "Business consultant" which comes with a very dark overlay on the hero picture section. I cannot find how to remove this. I am blocked as I won't do any further customising if I am not sure I can change this. I could change the picture itself but without any change to the color aspect. Thanks fo getting me out of this very deep hole (for me).
     
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Modern & powerful Agency Divi layout pack, featuring team carousel, sliding menu, etc.View Demo
  2. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    To remove the dark overlay, you just need to go to the Section settings > Advanced > CSS Class & remove free-background-overlay

    But if you wish to change the dark overlay color, just go to the Section Settings > Advanced > Custom CSS > Before & add background-color: rgba(76,41,233,0.8)!important;

    Change the color code to your desired color.
     
  3. Francois Mottaz

    Francois Mottaz New Member
    Divi Ultimate Header Plugin

    Thank you very much for the fast answer, but under advanced, under CSS, I have no class free-backgound-overlay that I can remove, there is nothing.
     

    Attached Files:

    1. PRO MEMBER PERKS Beautifully crafted custom colored 'Industrial' Divi layout for all Pro members:View Demo
  4. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    My bad. I thought you're referring to our plugin overlay.

    For your case, you can change the color in the Fullwidth header module settings > Design > Overlay > Background Overlay Color
     
  5. Francois Mottaz

    Francois Mottaz New Member
    Divi Ultimate Header Plugin

    Great, you made my day !
     
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Beautifully crafted Divi layout packs for you to kick start your Divi sites:View Demo
  6. Victor Irving Jenkins

    Pro Member

    I do not wish to change the color of the overlay, I wish to remove the overlay.
     
  7. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    If you're using the Fullwidth header module as well, then you can change the overlay color to be transparent: Fullwidth header module settings > Design > Overlay > Background Overlay Color > rgba(255,255,255,0)

    If not, kindly share your URL for your issue.
     
    1. PRO MEMBER PERKS Divi Cart Count Plugin - Easily add cart count to your Divi cart icon. 6 different styles to choose from:Learn More
  8. Victor Irving Jenkins

    Pro Member

    My page is in edit mode as I don't want to publish before I remove the dark overlay. I only see the Section settings. There is no Full width setting in the divi editor. Perhaps you could do a screen capture to show where the Full Width setting is located.
     
  9. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Here's the screenshot. I'm actually referring to the Module Settings.
    upload_2024-2-14_10-28-43.png

    And the module is called Fullwidth Header Module:

    upload_2024-2-14_10-29-55.png

    But if you're not using the the 'Fullwidth Header Module', then the overlay should be coming from your Section Settings:

    upload_2024-2-14_10-32-48.png

    Section settings > Advanced > CSS Class & remove free-background-overlay

    Section Settings > Advanced > Custom CSS > Before
    & remove all the CSS in it.

    Let me know if you still need any further clarification.
     
    1. PRO MEMBER PERKS Divi Block Pro - 30+ premade custom header designs for you to choose from:View Demo
  10. Victor Irving Jenkins

    Pro Member

    When I access the CSS Custom field, there is nothing in there. So there is nothing to remove and when I paste in the text you wrote, no change occurs. My header takes up the entire section.
     
  11. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Will need you to clarify more on your issue by sharing your site URL / screenshot.
     
    1. PRO MEMBER PERKS Divi Ultimate Archive Plugin - Tons of elegant premade sidebar styles to choose from for your Divi site:Learn More
  12. Victor Irving Jenkins

    Pro Member

     

    Attached Files:

  13. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    Unfortunately, I can’t troubleshoot from the screenshot. Will need to view the site to advice further on the dark overlay.

    Or perhaps can you share which premade layout / block that you used from our product, and we can see it from there?
     
    1. PRO MEMBER PERKS Divi Powerful Child Theme - Power up your Divi sites with tons of new functionalities & premade elements:Learn More
  14. Victor Irving Jenkins

    Pro Member

    I am using the layout called horse riding. The overlay appears when I import the picture for the header. This seems simple enough can we do a screen share or something? The overlay appears when I use s different photo in editing the layout.
     

    Attached Files:

  15. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    I see you're using Divi premade layouts, not our Pro membership products.

    To remove that overlay, you just need to go to the Section Settings & remove the Background Gradient. See screenshot below:

    upload_2024-2-15_22-43-48.png
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade dynamic background hover design for your Divi site without using any plugins:View Demo
  16. Victor Irving Jenkins

    Pro Member

    Can you direct to settings that allows me to make the fonts on these video the same?
     

    Attached Files:

  17. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    You can just right click the module & click Copy Module Styles. Then right click on the other module & click Paste Module Styles.
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade logo carousel design for your Divi site without using any plugins:View Demo
  18. Victor Irving Jenkins

    Pro Member

    The fonts do not change when I perform what you instructed.
     
  19. Divi.Help Pro Support

    Divi.Help Pro Support Administrator
    Staff Member

    What about before paste the module styles, try to Right Click > Reset Module Styles. After reset then only paste the module styles.

    If still not working, what about cloning the one that you need, then only adjust the content & position.
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade horizontal timeline design for your Divi site without using any plugins:View Demo