Fain In Image плавная загрузка картинки, после загрузки страницы

Index.html

      <header id="image">
      </header>

    <script>
        var rand = Math.random() * 6;// Создаем цифру от 1 до 6
        rand = Math.floor(rand);// Округляем до целого
        var img = new Image();   // Создает новый элемент изображения
        img.onload=function(){//действия после загрузки фото
            image.style.backgroundImage = 'url(img/bg-'+rand+'.jpg)';
            document.getElementById("image").classList.add('show-image');
        }
        // img.onerror = function() { };
        img.src = 'img/bg-'+rand+'.jpg'; // Устанавливает путь
    </script>

Style.less

header {
    position: relative;
    width: 100%;
    background-position: center;
  
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
  
    &:before{
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        content: "";
        background-color: #777;
        -webkit-transition: all 1s;
        -moz-transition: all 1s;
        transition: all 1s; 
    }
    &.show-image:before{
        // display: none;
        opacity: 0;
    }
}