Hey guys, I’m trying to set a background gradient on the site’s “Body (All Pages)” tag but it keeps repeating. Has anyone else had this issue? I saw a relevant post from 5 years ago but that seems a bit dated now.
I have unchecked the ‘repeat’ checkbox; however, the gradient keeps repeating as I scroll down the page. Ideally the gradient will fade into the solid background.
@artman2 just to reiterate what @dram said, the issue can be resolved using a div with the image background set to “fixed”. Note: this workaround did not require the use of custom header code.
I found this forum post from 2016 explaining the issue:
"…we actually have some javascript in place which prevents fixed backgrounds images from rendering as fixed on touch screen devices. We do this because there are some known repainting css issues caused by fixed background images on elements (it’s also really heavy on CPU’s).
A work around which you can try is set a Fixed element as the background, try the following:
** Add in a div, call it “Fixed background” (or whatever you wish)*
** Set the div to Position: Fixed*
** Width: 100%, Height: 100vh (type in 100vh so that it takes up the full viewport)*
** Adjust the z-index of this element to sit behind all other elements"*