Add an image dynamically to this beautiful frame

Question

Here is a beautifully animated border in pure CSS.

What if we want this animated borders as a frame and add an image as the content inside it.

When I add the image it just overlays the frame, But I want to put the image inside the frame, not over it.

I have tried my best but I can't find a solution without a hand.

Here is what I've tried (I need to add the image dynamically using javascript):

 //addimage(); // uncomment this to add the image to the frame function addimage(){ let pictureSource = 'https://www.architectureartdesigns.com/wp-content/uploads/2013/03/ArchitectureArtdesigns-8.jpg'; let image = document.createElement('img'); image.setAttribute("id", "shot"); var node = document.getElementsByClassName('content'); node[0].appendChild(image); image.src = `${pictureSource}`; let shot = document.getElementById("shot"); }

 html, body, .box .content { height: 100%; display: flex; align-items: center; justify-content: center; background-color: black; } .box { width: 300px; height: 300px; box-sizing: border-box; padding: 15px; position: relative; overflow: hidden; } .box::before { content: ''; position: absolute; width: 150%; height: 150%; background: repeating-linear-gradient( white 0%, white 7.5px, hotpink 7.5px, hotpink 15px, white 15px, white 22.5px, hotpink 22.5px, hotpink 30px); transform: translateX(-20%) translateY(-20%) rotate(-45deg); animation: animate 20s linear infinite; } .box .content { position: relative; background-color: white; flex-direction: column; box-sizing: border-box; padding: 30px; text-align: center; font-family: sans-serif; z-index: 2; } .box, .box .content { box-shadow: 0 0 2px deeppink, 0 0 5px rgba(0, 0, 0, 1), inset 0 0 5px rgba(0, 0, 0, 1); border-radius: 10px; } .box .content h2 { color: deeppink; } .box .content p { color: dimgray; } @keyframes animate { from { background-position: 0; } to { background-position: 0 450px; } }

 <div class="box"> <div class="content"> </div> </div>

Answer 1

Add it as background of content:

 addimage(); // uncomment this to add the image to the frame function addimage(){ let pictureSource = 'https://www.architectureartdesigns.com/wp-content/uploads/2013/03/ArchitectureArtdesigns-8.jpg'; var node = document.getElementsByClassName('content'); node[0].style.background='url("'+pictureSource+'") center/cover' }

 html, body, .box .content { height: 100%; display: flex; align-items: center; justify-content: center; background-color: black; } .box { width: 300px; height: 300px; box-sizing: border-box; padding: 15px; position: relative; overflow: hidden; } .box::before { content: ''; position: absolute; width: 150%; height: 150%; background: repeating-linear-gradient( white 0%, white 7.5px, hotpink 7.5px, hotpink 15px, white 15px, white 22.5px, hotpink 22.5px, hotpink 30px); transform: translateX(-20%) translateY(-20%) rotate(-45deg); animation: animate 20s linear infinite; } .box .content { position: relative; background-color: white; flex-direction: column; box-sizing: border-box; padding: 30px; text-align: center; font-family: sans-serif; z-index: 2; } .box, .box .content { box-shadow: 0 0 2px deeppink, 0 0 5px rgba(0, 0, 0, 1), inset 0 0 5px rgba(0, 0, 0, 1); border-radius: 10px; } .box .content h2 { color: deeppink; } .box .content p { color: dimgray; } @keyframes animate { from { background-position: 0; } to { background-position: 0 450px; } }

 <div class="box"> <div class="content"> </div> </div>

If you want you can simplify the code of the animation like below:

 addimage(); // uncomment this to add the image to the frame function addimage() { let pictureSource = 'https://www.architectureartdesigns.com/wp-content/uploads/2013/03/ArchitectureArtdesigns-8.jpg'; var node = document.getElementsByClassName('content'); node[0].style.background = 'url("' + pictureSource + '") center/cover' }

 body { height: 100vh; margin:0; display: flex; align-items: center; justify-content: center; background-color: black; } .box { border-radius: 10px; background: repeating-linear-gradient(-45deg, white 0 7.5px, hotpink 0 15px) 0 0/21.21px 21.21px; /* 21.21px = sqrt(2) * 15px */ animation: animate 1s linear infinite; } .box .content { width: 300px; height: 300px; border-radius: 10px; box-shadow: 0 0 2px deeppink, 0 0 5px rgba(0, 0, 0, 1), inset 0 0 5px rgba(0, 0, 0, 1); margin:15px; } @keyframes animate { to { background-position: 21.21px 21.21px; } }

 <div class="box"> <div class="content"> </div> </div>

Answer 2

Another option: set .content to overflow: hidden

And to help preserve the illusion that the frame is on top of the image, and an :after pseudo element to .box with an inset shadow.

 addimage(); // uncomment this to add the image to the frame function addimage(){ let pictureSource = 'https://www.architectureartdesigns.com/wp-content/uploads/2013/03/ArchitectureArtdesigns-8.jpg'; let image = document.createElement('img'); image.setAttribute("id", "shot"); var node = document.getElementsByClassName('content'); node[0].appendChild(image); image.src = `${pictureSource}`; let shot = document.getElementById("shot"); }

 html, body, .box .content { height: 100%; display: flex; align-items: center; justify-content: center; background-color: black; } .box { width: 300px; height: 300px; box-sizing: border-box; padding: 15px; position: relative; overflow: hidden; } .box::before { content: ''; position: absolute; width: 150%; height: 150%; background: repeating-linear-gradient( white 0%, white 7.5px, hotpink 7.5px, hotpink 15px, white 15px, white 22.5px, hotpink 22.5px, hotpink 30px); transform: translateX(-20%) translateY(-20%) rotate(-45deg); animation: animate 20s linear infinite; } .box:after { content: ''; position: absolute; z-index: 3; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 10px; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5); } .box .content { overflow: hidden; position: relative; background-color: white; flex-direction: column; box-sizing: border-box; padding: 30px; text-align: center; font-family: sans-serif; z-index: 2; } .box, .box .content { box-shadow: 0 0 2px deeppink, 0 0 5px rgba(0, 0, 0, 1), inset 0 0 5px rgba(0, 0, 0, 1); border-radius: 10px; } .box .content h2 { color: deeppink; } .box .content p { color: dimgray; } @keyframes animate { from { background-position: 0; } to { background-position: 0 450px; } }

 <div class="box"> <div class="content"> </div> </div>