Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Question

Hello,

I am attempting to add a custom background to my squarespace site. Specifically a valnajs background that can be found here:

https://www.vantajs.com/?effect=net#(backgroundAlpha:1,backgroundColor:13223885,color:7370174,maxDistance:24,points:6,showDots:!t,spacing:17)

I can successfully add this javascript and get the resulting image when I use a code block and the following code:

<script src="three.r92.min.js"></script>
<script src="vanta.net.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://www.vantajs.com/dist/vanta.birds.min.js"></script>


<div id=vantajs></div>

<script>
VANTA.BIRDS({
  el: "#vantajs",
});
</script>

 

However, this just inserts the image in that block and does not actually make the image the background of my page. I have tried many ways through the page code-injection feature to add this to my website, specifically the section-background html element, but nothing has worked. Here is an example of one of the methods I am trying when using the page code injection:

<script src="three.r92.min.js"></script>
<script src="vanta.net.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://www.vantajs.com/dist/vanta.birds.min.js"></script>

<script>
 (function(){var x = document.getElementByClassName("section-background"); 
x.setAttribute("id", "vantajs")})();
</script>

<script>
VANTA.BIRDS({
  el: "#vantajs",
});
</script>

 

Any help here would be greatly appreciated.

Share this post


Link to post

5 answers to this question

Recommended Posts

  • 0
9 minutes ago, Stephen-Mercatus said:

Yes, I believe that I have. It is the class of the element that controls the background of the page minus the header and footer.

Press F12 > Click "Console"

image.thumb.png.1af1a61621991fb82718cdf5813b9d0d.png


Send me a message if you have any questions (free 10 minutes)

Free code: Squarespace 7.0 (4000+ code)

Learn CSS Basic: Treehouse - W3Schools - Flexbox

Other groups: SS Customization Resource Group - SS CSS Support - SS Community

 

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...