Extend form background past container

[DanBQ]

Hi,

I'm trying to find a way to extend the grey background of the form on this page past the top and bottom of the background image below, so it looks like it sitting above it.

https://www-databeat-net.sandbox.hs-sites.com/-temporary-slug-63cfc60c-4815-4281-a89c-33528a74a424?h...

Any ideas on how to do this are appreciated!

Thanks!

[Kevin-C · Accepted solution]

@Hey @DanBQ 

Ive got a fun solution.

Add this css to this page.
The parts that "hang over" are pink just so they are easily idetified during testing. Change the color to #d8d8d8 before publishing.

.module-overlay .page-center {
  overflow: visible;
}

.module-overlay .page-center:after {
  content: "";
  clear: both;
  display: table;
}

.module-overlay .page-center .two-col-form.six.columns {
  position: relative;
}

.module-overlay .page-center .two-col-form.six.columns:before {
  position: absolute;
  width: 100%;
  height: 100px;
  top: -100px;
  left: 0px;
  background-color: pink;
  display:table;
  content:""
}

.module-overlay .page-center .two-col-form.six.columns:after {
  position: absolute;
  width: 100%;
  height: 100px;
  bottom: -100px;
  left: 0px;
  background-color: pink;
  display:table;
  content:""
}