Extend form background past container

Developer Support CMS Development
, ,
1

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?hs_preview=gEVqFrCP-14455470630

Any ideas on how to do this are appreciated!

Thanks!

2

@Hey @DanBQ

Ive got a fun solution.

image.jpg
image.jpg1918×1634 115 KB

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:""
}