How to Add Codepen to my Website.

Hello, I want to use this code on my website's homepage either as a section background or page background. https://codepen.io/mlxar/pen/RwGmNgr

Not sure where to paste the various HTML, CSS & JS codes.

Thanks for any help!

Ben

If apply on a section, try adding a Code Block > Paste this code

<!-- particles.js container --> <div id="particles-js"></div> <!-- stats - count particles --> <div class="count-particles"> <span class="js-count-particles">--</span> particles </div> <!-- particles.js lib - https://github.com/VincentGarreau/particles.js --> <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <!-- stats.js lib --> <script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
<style>
  /* ---- reset ---- */ body{ margin:0; font:normal 75% Arial, Helvetica, sans-serif; } canvas{ display: block; vertical-align: bottom; } /* ---- particles.js container ---- */ #particles-js{ position:absolute; width: 100%; height: 100%; background-color: #462426; background-image: url("https://lh3.googleusercontent.com/dx2xB7nM05g7kjuEbsr08kMhgcITNI7vIFS7XTYaSBWF8Q1Gui85jkfzIg_WQTrRXBbk0V1cGL6AVdMiDO7t0RGpdEjr2S2JHsKDYOkNzM7xEjYsH6dBUie-AiuatLnhJ45OIOzV_jCPaotVDV0yyC3ZARh1oLKu5nHzd_OKoH2deTdTmuLDJ6J-gajAuhiEkomlCbHuQKkGVSPklDAwNtoIAugEUdhRVAWponhZxk8BJLAMK2dN6NJOSD_DvoAIDK2ZT9gWgZ8tpQJ9-fmcv86ZskvMkhg3mHmLMgqDUWWCgmQH6R0xTZRn9ci8zwzTNIhYqrlvC_3gxd9lVpvDXtgzdMrGPGp1u293rh1sGkzlyk3wyh6nhCM4mITohARdZG59qM-WZehAe_deYNe7NWeGAD3IWwrbISHC0Yd4YtIuzVYDOqg_dJz02MEd6e0GZ4qe7pkYKxJIjiuddZen-OEyvQ8459qFuy76KdWfjbZ0R1OcdhbvQvRfcVmoMcUbCPcMpeWhwLzG4UdHjlWorQ397kjUZm-ChtnvHsHnNfRgisFRDqgMH7CDydtSHV35RXF6XXgvO9Tp2p32Zb5gbJ2_s5506DIH5nDQWKep6CJUhr1ulC8fsCYvuWgfH0_UVNiYz2ievF3LcRh3vpfHazf0DP6p6rXwjEkoMCNbv3y-0F3IaucRvUy6STM=w1200-h600-no?authuser=1"); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; } /* ---- stats.js ---- */ .count-particles{ background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: .8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; } .js-count-particles{ font-size: 1.1em; } #stats, .count-particles{ -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } #stats{ border-radius: 3px 3px 0 0; overflow: hidden; } .count-particles{ border-radius: 0 0 3px 3px; }
</style>
<script>
  particlesJS("particles-js", {"particles":{"number":{"value":600,"density":{"enable":true,"value_area":800}},"color":{"value":"#ffffff"},"shape":{"type":"circle","stroke":{"width":0,"color":"#000000"},"polygon":{"nb_sides":5},"image":{"src":"img/github.svg","width":100,"height":100}},"opacity":{"value":0.5,"random":true,"anim":{"enable":false,"speed":1,"opacity_min":0.1,"sync":false}},"size":{"value":3,"random":true,"anim":{"enable":false,"speed":40,"size_min":0.1,"sync":false}},"line_linked":{"enable":true,"distance":150,"color":"#ffffff","opacity":0.4,"width":1},"move":{"enable":true,"speed":6,"direction":"none","random":false,"straight":false,"out_mode":"out","bounce":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200}}},"interactivity":{"detect_on":"canvas","events":{"onhover":{"enable":true,"mode":"repulse"},"onclick":{"enable":false,"mode":"remove"},"resize":true},"modes":{"grab":{"distance":400,"line_linked":{"opacity":1}},"bubble":{"distance":400,"size":40,"duration":2,"opacity":8,"speed":3},"repulse":{"distance":200,"duration":0.4},"push":{"particles_nb":4},"remove":{"particles_nb":2}}},"retina_detect":true});var count_particles, stats, update; stats = new Stats; stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function() { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);;
</script>

Thank you @tuanphan! This seems to just place a very small window of the background into my section with no particles (but with text that says '-- particles' - image below.

I will try to play around with this code block to see if i can make it work somehow...

On 2/2/2021 at 4:14 PM, bwjames said:

Thank you @tuanphan! This seems to just place a very small window of the background into my section with no particles (but with text that says '-- particles' - image below.

I will try to play around with this code block to see if i can make it work somehow...

Can you share link to page in screenshot?

@tuanphan https://www.mlxar.com/test2 

Thanks!

try change http in above code to https

@tuanphan thanks! the particles appeared now, it still is only a very tiny rectangle rather than a section background though... do you know if I can change this? I'm also trying to figure it out on my own...

Update: if i change the position tags to relative then the size is fixed. The main problem is that it acts like a standalone block rather than a section background, so the other text / content goes above or below it, never on top / overlayed...

Hello, how can I add https://codepen.io/hollyos/pen/QNRXYK and https://codepen.io/rileyjshaw/pen/bEEVra into my website? I have been trying to follow, but nothing changed!

On 3/24/2022 at 4:37 AM, Alexis2107 said:

Hello, how can I add https://codepen.io/hollyos/pen/QNRXYK and https://codepen.io/rileyjshaw/pen/bEEVra into my website? I have been trying to follow, but nothing changed!

It looks like I answered in another post. Have you solved it yet?