HTML working. but not correctly

Need help
1

I’m using the following HTML for a gradient. In Preview, the gradient works. Now, how can I send this to the background and keep it in place?

For context, I’m pasting the HTML into the Page HTML Header area.

   <html>
<head>
    <script src="https://s3.amazonaws.com/appforest_uf/f1678133814649x203184523640227420/Gradient.js" ></script>
</head>
<style>
    body {
        margin:0;
        padding:0;
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: -1;
    }
    #gradient-canvas {
        --gradient-color-1: #7b57df;
        --gradient-color-2: #7b57df;
        --gradient-color-3: #0090D2;
        --gradient-color-4: #FEFEDF;
    }
</style>
<body>
    <canvas id="gradient-canvas" style="width:100vw;height:100vh;z-index:-1;"></canvas>
    <script>
        var gradient = new Gradient()
        gradient.initGradient('#gradient-canvas');
    </script>
</body>
2

Hi @deryck.
The problem is that this is not a pure HTML code, you are running js code. I think this is something you would need a plugin for (either a dedicated plugin that takes in the gradient colors as input and creates the gradient or there are some generic JS plugins in the marketplace that might help you achieve it). I would probably just create the plugin itself.

Good luck!
Eldad

1 Like
3

@deryck I thought it was a nice exercise so I just did it and publish as a free plugin.
You can go ahead and install it Stripe Gradient Plugin | Bubble
or for it and do whatever you need to

Good luck!

2 Likes
4

Thank you so much for this, @eldad1! Excited to try this. Any tips/instructions for successful deployment?

5

@deryck it straight forward, install the plugin and that will add a gradient element to your available elements. Drag it to the page and adjust size so it will be the whole page.
I set up the page to the new responsive engine, and did many set and width/height
BTW the editor in the sample project is public , so you can just look at how I did it

Good luck

1 Like
6

@eldad1 I tried installing this and ran into a few issues. Perhaps you can help me (I’m sure it’s user error, on my part haha)

  1. I want to use this gradient as a background. Any suggestion for using this behind the rest of the page content?
  2. When I preview the page with this loaded, regardless of size settings, the page continues to scale vertically without end. Does that make sense? It just keeps growing, vertically
7

Hi @deryck, order and size of components is configurable, and you have a lot of options here.
This is what I did
I set the page itself as “Align to parent” and “Full width”:

image
image652×672 29.1 KB

I added the gradient element and gave it fixed width of 100% and Height as 1000px

image
image684×1158 50.7 KB

I added some Text and just made sure it is on top (lower in the list)
image

This is the end result

image
image3360×1946 243 KB

Of course you can also use groups and other container layouts to adjust the view to your needs

1 Like
8

You’re the best. Figured out what I was doing wrong, thanks to you, @eldad1

1 Like
9

This topic was automatically closed after 70 days. New replies are no longer allowed.