Has anyone else experienced the issue where the background gradient on the "Body (All Pages)" tag in Webflow keeps repeating even after unchecking the 'repeat' checkbox?
TL;DR
- Ensure the background is a native gradient, not an image, and confirm "Repeat" is unchecked.
- Check for multiple background layers, custom code overrides, and verify changes apply to the correct "Body (All Pages)" selector.
- Publish the site to inspect styles using DevTools and try re-adding the background gradient if issues persist.
The background gradient repeating issue on the “Body (All Pages)” tag in Webflow can happen due to incorrect gradient settings or conflicting style rules. Here’s how to troubleshoot and fix it.
1. Check the Background Type
- Ensure you're using a gradient, not an image. Background gradients in Webflow shouldn't have a "Repeat" setting unless you've added a background image that mimics a gradient.
- If it’s set as a background image, Webflow will apply image settings like “Repeat.” In that case, unchecking Repeat is appropriate.
2. Review All Background Layers
- Webflow allows multiple background layers. If another hidden or secondary layer is using a repeating pattern or gradient image, it might cause the repeat behavior.
- Go to the Style panel → Backgrounds section, and check if there’s more than one layer. Remove or correct any unwanted layers.
3. Confirm That You're Editing the Right Element
- Make sure you're applying the style changes directly to the Body (All Pages) tag and not a class or child element that overrides it.
- Confirm in the Selector field that it says Body (All Pages), not a different class.
4. Check for Custom Code or Overrides
- If you have any Custom Code in the Page Settings or Site Settings, check for CSS that might override the background behavior.
- Look for rules like
background-repeat: repeat;applied tobodyorhtml.
5. Inspect in the Published Site
- Webflow’s Designer view can differ from the final output. Publish your site and inspect the background using your browser’s DevTools.
- Look for computed CSS styles on the
<body>element — if you still seebackground-repeat: repeat, something is overriding your Webflow setting.
6. Try Re-Applying the Gradient
- Remove the background layer entirely, save the change, then re-add the background gradient.
- Sometimes, residual settings persist in the UI. Re-adding the layer from scratch can clear any hidden settings.
Summary
If your background gradient still repeats after unchecking the Repeat setting, verify whether it’s actually a background image rather than a native gradient. Check for multiple background layers, stray CSS overrides, or unpublished changes. Re-adding the gradient from scratch often resolves persistent issues.