Title: Interactive Background Not Working (HTML, CSS, Javascript)
Last modified: August 30, 2024

---

# Interactive Background Not Working (HTML, CSS, Javascript)

 *  Resolved [joyvisionstudio](https://wordpress.org/support/users/joyvisionstudio/)
 * (@joyvisionstudio)
 * [1 year, 8 months ago](https://wordpress.org/support/topic/interactive-background-not-working-html-css-javascript/)
 * I’m coding an interactive grid effect background based on this link: [https://codepen.io/Hyperplexed/pen/RwzGKwy](https://codepen.io/Hyperplexed/pen/RwzGKwy)
 * The plane rotation skews all the elements on my website so I made changes to 
   the code provided.
 * I added this HTML to an HTML block in Elementor:
 *     ```wp-block-code
       <div id="container">  <div class="tile"></div></div></div>
       ```
   
 * I added this CSS to Additional CSS (Appearance > Customize > Additional CSS):
 *     ```wp-block-code
       :root {  --red-rgb: 248 113 113;  --blue-rgb: 56 189 248;  --green-rgb: 74 222 128;  --yellow-rgb: 253 224 71;  --background-rgb: transparent;}* {  box-sizing: border-box;  margin: 0;  padding: 0;}#container {  width: 140rem;  aspect-ratio: 1;  display: grid;  grid-template-rows: repeat(40, 1fr);  grid-template-columns: repeat(40, 1fr);  position: absolute;  transform: scale(1.25);}#container:after,#container:before {  content: "";  position: absolute;  inset: 0px;  pointer-events: none;}#container:before {  z-index: 2;  background-size: 5%;  background-repeat: repeat;  opacity: 0.25;}#container:after {  z-index: 3;  background: radial-gradient(circle, transparent 25%, rgb(var(--background-rgb)) 80%);}.tile {    border: 1px solid rgb(255 255 255 / 25%);  transition: background-color 1500ms;}.tile:hover {  transition-duration: 0ms;}.tile:nth-child(4n):hover {  background-color: rgb(var(--red-rgb));}.tile:nth-child(4n + 1):hover {  background-color: rgb(var(--blue-rgb));}.tile:nth-child(4n + 2):hover {  background-color: rgb(var(--green-rgb));}.tile:nth-child(4n + 3):hover {  background-color: rgb(var(--yellow-rgb));}.tile:nth-child(7n):hover {  background-color: rgb(var(--blue-rgb));}.tile:nth-child(7n + 3):hover {  background-color: rgb(var(--green-rgb));}.tile:nth-child(7n + 5):hover {  background-color: rgb(var(--yellow-rgb));}.tile:nth-child(7n + 6):hover {  background-color: rgb(var(--red-rgb));}.tile:nth-child(11n + 1):hover {  background-color: rgb(var(--red-rgb));}.tile:nth-child(11n + 4):hover {  background-color: rgb(var(--blue-rgb));}.tile:nth-child(11n + 7):hover {  background-color: rgb(var(--green-rgb));}.tile:nth-child(11n + 10):hover {  background-color: rgb(var(--yellow-rgb));}
       ```
   
 * I installed WPCode and created a new snippet (it is Active, code type: JavaScript
   Snippet, Insert Method: Auto Insert, Device Type: Any Device):
 *     ```wp-block-code
       const container = document.querySelector("#container"),      tile = document.querySelector(".tile");for(let i = 0; i < 1599; i++) {  container.appendChild(tile.cloneNode());}
       ```
   
 * With this code setup above, I can get the page to blink one color but it’s not
   functioning as expected. How can I fix this?
 * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Finteractive-background-not-working-html-css-javascript%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 1 replies (of 1 total)

 *  Plugin Author [Mircea Sandu](https://wordpress.org/support/users/gripgrip/)
 * (@gripgrip)
 * [1 year, 8 months ago](https://wordpress.org/support/topic/interactive-background-not-working-html-css-javascript/#post-17988943)
 * Hi [@joyvisionstudio](https://wordpress.org/support/users/joyvisionstudio/),
 * Have you tried using the code on your website without making any changes first
   to see if that works?
 * From what you are describing it sounds like WPCode is inserting the code correctly
   but the code needs some adjustments.
 * Can you please share an URL where you implemented this and it does not work as
   intended?

Viewing 1 replies (of 1 total)

The topic ‘Interactive Background Not Working (HTML, CSS, Javascript)’ is closed
to new replies.

 * ![](https://ps.w.org/insert-headers-and-footers/assets/icon-256x256.png?rev=2758516)
 * [WPCode - Insert Headers and Footers + Custom Code Snippets - WordPress Code Manager](https://wordpress.org/plugins/insert-headers-and-footers/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/insert-headers-and-footers/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/insert-headers-and-footers/)
 * [Active Topics](https://wordpress.org/support/plugin/insert-headers-and-footers/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/insert-headers-and-footers/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/insert-headers-and-footers/reviews/)

## Tags

 * [javascript](https://wordpress.org/support/topic-tag/javascript/)

 * 1 reply
 * 2 participants
 * Last reply from: [Mircea Sandu](https://wordpress.org/support/users/gripgrip/)
 * Last activity: [1 year, 8 months ago](https://wordpress.org/support/topic/interactive-background-not-working-html-css-javascript/#post-17988943)
 * Status: resolved