Добавить изображение динамически в эту красивую рамку

Question

Вот красиво анимированная граница в чистом виде CSS.

Что, если мы хотим, чтобы эти анимированные границы были в виде рамки и добавляли изображение в качестве содержимого внутри него.

Когда я добавляю изображение, оно просто накладывается на рамку, но я хочу поместить изображение внутри рамки, а не над ней.

Я старался изо всех сил, но не могу найти решение без руки.

Вот то, что я пробовал (мне нужно добавить изображение динамически, используя 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

Добавить в качестве фона контента:

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>

Если вы хотите, вы можете упростить код анимации, как показано ниже:

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

Другой вариант: установите .content на overflow: hidden

И чтобы сохранить иллюзию, что рамка находится сверху изображения, а псевдоэлемент :after - .box со вставкой тень.

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>