posted on October 3

If your looking to remove the form body and display all fields directly on a full sized background image or pattern this CSS is handy for making the form body background transparent.

To demonstrate let's use this randomized gradient background from https://www.csshero.org/mesher/ 

I can set that as the body of my form with the following CSS

html, body {
  margin: 0;
  min-height: 100vh;
}

body {
background-color:hsla(0,100%,50%,1);
background-image:
radial-gradient(at 40% 20%, hsla(28,100%,74%,1) 0px, transparent 50%),
radial-gradient(at 80% 0%, hsla(189,100%,56%,1) 0px, transparent 50%),
radial-gradient(at 0% 50%, hsla(355,100%,93%,1) 0px, transparent 50%),
radial-gradient(at 80% 50%, hsla(340,100%,76%,1) 0px, transparent 50%),
radial-gradient(at 0% 100%, hsla(22,100%,77%,1) 0px, transparent 50%),
radial-gradient(at 80% 100%, hsla(242,100%,70%,1) 0px, transparent 50%),
radial-gradient(at 0% 0%, hsla(343,100%,76%,1) 0px, transparent 50%);

}

But the form body background remains on top

To hide the form background add this CSS

#cf-formtitle, .cf-formwrap {
  background: hsla(0, 100%, 50%, 0.0) !important; 
}

7 0