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