[seregadushka]

решил я сделать простую задачу : Наложить Туман на картинку. Т.е. на любую случайную картинку прозрачный .PNG. Но есть

---------- условие  --------------
HTML не трогать . 
----------------------
Прописывать любые стили -- можно. 
Стили через JS -- можно. 
----------------------

Как видите , сами туманы наложены (или накладены) через JS. HTML я трогать не могу.
Половину стилей из JS можно перенести в <style>, это не принципиально. Проблема в высоте.


Проблема : не могу сделать мутному туману height: 100%;

В коде видно, что div для тумана создается через JS , и приклеивается к объекту
<div id="wb_Image1"

Туман (2 штуки) с разной скоростью движутся в сторону. Размеры тумана любые (ширина), положение любое.
Одно требование : высота тумана = высоте контейнера картинки "wb_Image1"

Понятно, что нельзя просто взять цифру height:729px; . Ее можно получить только через JS

все это не работает. Я не понимаю этой проблемы .

fog.style.height = imageContainer.offsetHeight + 'px'; 
fog.style.height = imageContainer.offsetHeight;
fog.style.height = imageContainer.style.height + 'px';  
fog.style.height = imageContainer.style.height;  

background-size: cover;
background-size: contain;

У тумана высота 631рх и все, как прибито , размер не меняется.

Вот CODEPEN
(возможно, есть что-то лишнее, я уже лепил все подряд везде где можно )

Расскажите, как сделать туману height: 100%; ?

============== P.S.=====================

Нет смысла держать на CODEPEN ошибки и нерабочие предварительные варианты. Делаем рабочий CODEPEN, ошибка оставляем тут.

fog.style.background = `url("${backgroundUrl}") repeat-x`;

при такой записи впечатление , что все стили из <style> не применяются

.fog {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-size: cover;
    pointer-events: none;
       }

background-size: cover; -- точно не применялось.
Конечно, быть такого не может . Но интересно, о чем думает этот браузер, когда получает стили из JS.