Изменение заднего фона в зависимости от выбранного изображения

.card { 
  max-width: 500px; 
  padding: 20px; 
  margin: 20px auto; 
  position: relative; 
} 
 
.blurry { 
  content: ''; 
  display: block; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  overflow: hidden; 
  background: #666; 
} 
 
.blurry img { 
  position: absolute; 
  filter: blur(10px); 
  width: 110%; 
  top: 50%; 
  left: 50%; 
  width: 100%; 
  transform: translate(-50%, -50%); 
  opacity: .5; 
} 
 
.cover { 
  position: relative; 
  width: 200px; 
  box-shadow: 0px 0px 20px rgba(0, 0, 0, .3); 
} 
 
.cover img { 
  width: 100%; 
  display: block; 
}

<div class="card"> 
  <div class="blurry"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdEEpCwzpA4E6GBOn693lsyIVdrlCcK8Y_OAEt8T7-3JKdp152ow"></div> 
  <div class="cover"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQdEEpCwzpA4E6GBOn693lsyIVdrlCcK8Y_OAEt8T7-3JKdp152ow"></div> 
</div>

const IMAGE_SOURCES = [ 
  'http://st.kp.yandex.net/images/film_iphone/iphone_1047724.jpg?width=90',  
  'http://st.kp.yandex.net/images/film_iphone/iphone_1045590.jpg?width=90',  
  'http://st.kp.yandex.net/images/film_iphone/iphone_1046545.jpg?width=90',  
  'http://st.kp.yandex.net/images/film_iphone/iphone_841470.jpg?width=90',  
  'http://st.kp.yandex.net/images/film_iphone/iphone_1027311.jpg?width=90' 
];  
 
var srcGen = imageSrcGenerator(IMAGE_SOURCES), 
    bgEl   = document.getElementById('background'),  
    imgEl  = document.getElementById('pic');  
 
imgEl.addEventListener('load', function () { 
  bgEl.style.backgroundImage = `url(${this.src})`;  
});  
imgEl.addEventListener('click', function () { 
  this.src = srcGen.next().value;  
});  
imgEl.click();  
 
function* imageSrcGenerator(srcArr) { 
  let i = -1; 
  while (++i < srcArr.length || !(i = 0)) 
    yield srcArr[i];  
}

#background { 
  position: absolute;  
  left: 0; top: 0; right: 0; bottom: 0;  
  background-repeat: no-repeat;  
  background-position: center 30%;  
  background-size: cover;  
  filter: blur(8px); 
} 
 
#pic { 
  width: 90px; height: 130px;  
  position: absolute; left: 20%; top: 50%; 
  transform: translateY(-50%);  
  box-shadow: 0 3px 10px 0 #0004;  
}

<div id="background"></div> 
<img id="pic">