Streaming live at 10am (PST)

Gradient Background Keeps Repeating Despite No-Repeat

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.

@microfame - can you share your read-only link?

Here you go @sam-g … check out “TEST PAGE” and scroll down to see the gradient repeating. https://preview.webflow.com/preview/style-guide-template-7a967d?utm_medium=preview_link&utm_source=designer&utm_content=style-guide-template-7a967d&preview=6e19e9bd87ecddd2d30137c0f2fcbe01&pageId=5f6b5edf469492dc561a0b68&mode=preview

I’ve also experienced this.

I found that it’s unreliable to style use the Body, so I put a DIV inside as a wrapper and style this instead.

See if that helps.

1 Like

@microfame - it sounds like this can be addressed by adding this style to the body:

body {
background-attachment:fixed;
}

You’ll have to add that as custom code though.

Ok thanks. That’s pretty much the same fix as the forum suggestion from 2015.

I’ll try the Div workaround too but I’m not sure how that will play in with my existing Sections.

If you create an absolutely positioned div that would fill whole body then there will be no problems.

1 Like

I’m having a similar issue where the background is tiling and repeating as if it was an image background

If your issue is with styling the body element then do not style the body as discussed above.

@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"*

Source: Trouble with fixed background images not remaining fixed on touch screen devices