Making the Header area and Body Transparent

[sakirose]

What css will allow me to make the header and body transparent so my background image is slightly visible thru these areas? I would like to use something like this css there:

{background-color: #ffffff !important;
opacity: 0.35;
}

See image attached for clarification.

Attachments:

You must be logged in to view attached files.

[sakirose]

My goal is to create the effect that I have done on another website where I create a background that becomes visible as part of the design – see attached image.

Attachments:

You must be logged in to view attached files.

[sakirose]

This reply has been marked as private.

[sakirose]

This reply has been marked as private.

[Kyle – SUPPORT]

Add this to your custom css:

#container.boxed-layout {
  background: transparent;
}
.page-shadow .boxed-layout {
  box-shadow: none;
}
#main-container {
  background-color: rgba(255,255,255,0.35);
}

– Kyle

[sakirose]

This reply has been marked as private.

[Kyle – SUPPORT]

Add this:

#header-section:before, #header .is-sticky .sticky-header, #header-section .is-sticky #main-nav.sticky-header, #header-section.header-6 .is-sticky #header.sticky-header, .ajax-search-wrap {
  background: transparent;
}
#footer {
  background: transparent;
}
#copyright {
  background-color: transparent;
}

– Kyle