A loooooong Gradient on Body

Design help General
1

For some reason I can’t make this happen!
I created a gradient on the body background and I want it to be all along the website (one long gradient) but for some reason it fills 100% and than keeps repeating the gradient at the same size.
I tried to set a size for it but it just keep repeating…

Public Link: https://webflow.com/design/underwater?preview=15cc4450b8aaa477ec2bdd90939760f7

2 Likes
2

Hi @Mordi_Levi, the background repeat option is not available on the gradient selection (but it is a good idea to build this in :), so you just need a little css in your HEAD of your site, paste the following in:

<style>
    
    body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
    
</style>

Try that, and see if it works, you should only have to paste this css into your head, save and republish. Cheers !

1 Like
3

@cyberdave thanks :smile: but not exactly what i had in mind, this just makes the background static
http://underwater.webflow.com/

I want it to be one long gradient along the website

4

Hey @Mordi_Levi, check out this approach: html - Making gradient background fill page with css - Stack Overflow - looks like you also need to set the html {} selector to be 100% of the height. Note that this can cause quite a few issues with other controls (e.g. all those “make a section fill up 100% of the above-the-fold-viewport” tutorials will break and have that section fill the entire length of the page).

5

@callmevlad, Thanks, I don’t really mind all I need is a long gradient, 5 sections, and PNG’s uploaded into them.
This is going to be really simple, I won’t need sections to fill 100%.

Is this code effects the gradient colors I have created…? or should i just add the CSS part to the Body?

6

Did you consider creating a gradient in Photoshop with a height of eg. 2000px and width 1px and then using it as a background image of body element with a repeat-x? Or any higher value that will fill the body.

7

I thought about it but the images are already really big (illustrations, has to be high quality), and the site is going to be very long I am trying to make it as light as possible…
I really didn’t think this would be so complicated :confused:

8

Guys did anybody find a way to fix this…? This is an illustration project i have been working on for the last three months, I would really like to publish it already!!

Please help…

9

Hi @Mordi_Levi,

I took a peek at your site and may have found a solution for you. Take a peek at this Quickcast (http://quick.as/YRJqTRxr) for a visual to the explanation below:

  1. First, remove background styling on your body tag
  2. Then, add a new div block and give it a class name (e.g. mainContainer). Add everything into this container.
  3. Lastly, style the mainContainer with the background gradient as you wish.

NOTE: to avoid having the sidescrolling issue, try setting the “mainContainer” to overflow: hidden.

Hope this helps! if not, contact us at support@webflow.com and I’d be happy to take a closer look.

8 Likes
10

@thewonglv Thank you very much william, it Works like a charm!

11

Anyone who might have difficulty with this should try the following (after doing @thewonglv’s 3 steps):

  1. Set mainContainer div to Position Absolute with Full selected
  2. Set mainContainer div to Overflow Auto

This worked for me.