Gradient Background Replicating

Design help Layout & Design
1

Happy Weekend everyone!

I sent in a support ticket to Webflow and it’s been a few days so I thought I’d ask here. I’ve set my body block to having a gradient background, but I’ve run into a few issues.

My goal: A single gradient that covers the entire background regardless of how far in or out you zoom. Simple gradient. My carrd site is a good example: https://silveretchings.com/. I’m changing hosts because carrd is designed to be a single page site and that no longer fits my needs.

So here are the issues I’ve run into:

  1. When I first put the gradient as the background of the body block, it tiled the gradient. Not what I want.

  2. I tried using a div block inside the body block and put the gradient on that. When I zoom out I got a massive white margin on the right, left, and bottom sides.

  3. I’ve gone back to using a gradient in the body block. Now we have a massive margin there as well as soon as I zoom out.

I followed all the suggestions on this page.

Does anyone have any other suggestions for how to do this? Again, all I want is the background to be a gradient and for that gradient to cover the entire background regardless of screen size or zoom.

Read only link

Live site link

Thank you so much!

2

hi @silveretchings the issue is a misconception of how it should be done.

  1. Background is an image
  2. Element div-gradient-body has a fixed width:1920px (is not dynamic)

SOLUTION:

  1. Use CSS gradient
  1. On div-gradient-body use max-width instead of width

I will suggest visiting WFU and learning how this platform works and what WF UI offers and getting some CSS courses to learn at least the very basics. :wink: