[解決済み] HTMLの背景画像が拡大されている

質問

あるセクションの背景画像を5秒ごとに変えようとしているのですが、JavaScriptを使うことでなんとか実現できています。しかし、問題は画像が拡大されることです。何が間違っているのでしょうか？

HTMLです。

<section id="hero" class="d-flex align-items-end ">

JavaScriptです。

function displayNextImage() 
{
    x = (x === images.length - 1) ? 0 : x + 1;
    document.getElementById("imgg").src = images[x];
    document.getElementById("hero").style.background = first[x];
}
        
var first = [], k = -1;
first[0] = "url('1.jpg') no-repeat";
first[1] = "url('2.jpg') no-repeat";
first[2] = "url('3.jpg') no-repeat";

解決方法は？

おそらく、画像のサイズが合わないのでしょう。 background-size を cover :

HTMLです。

<section id="hero" class="d-flex align-items-end ">

JSです。

function displayNextImage(){
  x = (x === images.length - 1) ? 0 : x + 1;
  document.getElementById("imgg").src = images[x];
  document.getElementById("hero").style.background = first[x];
}
    
var first = [], k = -1;
first[0] = "url('1.jpg') no-repeat cover";
first[1] = "url('2.jpg') no-repeat cover";
first[2] = "url('3.jpg') no-repeat cover";