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 you're editing the global "Body (All Pages)" tag, not a local class.
- Confirm all background layers have "Don’t Repeat" selected.
- Publish the site and check the live version to confirm changes.
- Use browser DevTools to inspect for overriding styles or repeating gradients caused by other CSS or custom code.
If your background gradient on the "Body (All Pages)" tag continues to repeat even after unchecking the 'Repeat' option, it's likely due to a styling or configuration conflict elsewhere.
1. Confirm You're Editing the Correct Element
- Click on the Body element, then check that you're styling the "Body (All Pages)" tag, not a class applied to just one page or instance.
- Webflow allows you to style base elements and classes separately, so make sure you're editing the global base tag.
2. Ensure "Repeat" is Disabled in All Layers
- Under the Backgrounds section in the Style panel, make sure the gradient layer has Repeat set to “Don’t Repeat.”
- Check all background layers (if multiple are applied). Sometimes, one layer might be set incorrectly while another looks fine.
3. Check Browser Rendering and Publish
- Webflow's Designer may display backgrounds differently than the published site. Always click Publish and check the live link to confirm the change is applied.
- Some browsers may visually display repetitions due to container size, so verify that the Body height is set correctly (e.g., 100vh or auto depending on your layout).
4. Inspect Additional Styles Overriding It
- If your gradient is still repeating:
- Check for additional CSS classes or custom code that may override the background settings.
- Use the Navigator panel and Style panel to review if other elements (e.g., a wrapper div or the html/body tag via custom code) apply a different background.
5. Inspect in Browser DevTools
- Use browser DevTools (right-click > Inspect) on the live site to identify if the
background-repeatproperty is still being applied. - In Chrome or Firefox, you can visually see which rule is setting or overriding the background and make real-time changes to test solutions.
Summary
Ensure you're editing the "Body (All Pages)" tag, confirm that all background layers have "Don’t Repeat" set, and verify via published site and browser inspection that no other styles or code are overriding your gradient settings.
