Want to make my header transparent and overlay the hero image on each page

I am trying to make my header transparent so that when I make the hero image on each page set to fill the screen the whole picture is included and you don’t have to scroll down at all to see the whole pic.

Website: www.thejetweek.co

Any help or suggestions greatly appreciated!

Hello there,

Please try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .elementor-3605 .elementor-element.elementor-element-0489431 > .elementor-background-overlay {
      opacity: 0;
    }

Regards,
Kharis

Hey Kharis,

Thanks for responding so quickly. I didn’t see any change when posting that in the addt. CSS box. Below is a copy of the CSS code I added to the “custom CSS” box:

    .content-wrapper {
         width: 100%;
    }
     .row {
         margin-right: 0;
         margin-left: 0;
    }
     .posts-layout {
         margin: 0 auto;
    }
     .single-post .content-wrapper {
         width: 1170px;
    }
     .page-wrap {
         padding-top: 0px;
         padding-bottom: 0px;
    }
     .page .page-wrap .content-wrapper, .single .page-wrap .content-wrapper {
         padding: 0px;
    }

Not sure if that would null any of those changes…

Will

Mail](https://go.microsoft.com/fwlink/?LinkId=550986) for Windows 10

Hello there,

I am sorry for incorrect code. Please try this one:

    .elementor-3682 {
      position: absolute;
      top: 0;
      left: 0;
    }

    .elementor-3682 .elementor-element-23642a6b {
      background-color: transparent !important;
    }

Regards,
Kharis