Туман на картинке
 

решил я сделать простую задачу : Наложить Туман на картинку. Т.е. на любую случайную картинку прозрачный .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.

В джаваскрипте замените строку

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

на

fog.style['background-image'] = `url("${backgroundUrl}")`;

Тогда применится

background-size: cover;

из стиля. Либо просто сам стиль заменить на

background-size: cover !important;

Добавлено: или так -

fog.style.background = `center/cover url("${backgroundUrl}")`;

Профессор , Спасибо. Я не понимаю, какой !important , если он применяется к вновь созданному туману, а не к старой картинке из HTML.
Туман свежий, там нет старых стилей и переопределений.
Но этот !important работает !

Это повод сделать 3 туман.

Профессор , спасибо еще раз за 3 варианта. 1 и 3 -- я даже такого синтаксиса не встречал. Очень пригодится.

Профессор , с этим !important -- так и не ясно, зачем он

Но если продлить аналогию, работает более чистый способ -- разделение background по свойствам .
Почему не работает сокращенная запись -- не понятно.

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

Все предельно понятно - у свойств объекта нет "сокращенной" записи.

не надо подгонять свою теорию под правильный ответ, найденный ранее.

fog.style.background = `url("${backgroundUrl}") repeat-x`;
fog.style.animation = `fogMove ${animationDuration} linear infinite`;

Это строки из оригинальной версии вопроса (ради красоты я исправил CODEPEN). Они и является сокращенной записью. Картинка определялась и повторялась правильно. Полная Анимация -- правильно.

По вашей логике сама fog.style.background -- это уже несуществующее свойство. Оно тоже "сокращенное" .

seregadushka,
https://developer.mozilla.org/en-US/...CSS/background

Вообще это проще сделать через svg фильтр. Какой-нить displcenent map с наложением...

интересно , как ? Я видел полноцвет в SVG, там размер картинки от 10 МБ.
Прозрачных туманов в SVG не встречал.

Здесь картинки fog.PNG по 1 МБ. PNG с альфа-каналом требует 32 bit .
Насколько я знаю, в PNG есть только настройка битности. А компрессии нет.
И так уже 631pх , не много, а размер 1 МБ.
Хотел 3 разных тумана, но с такими размерами ...