背景画像をクリックでスライドさせる

背景画像をクリックでスライドさせているのですが、背景画像が伸びながら変わってしまいます。デフォルトでは、正しく表示されますが、次の画像に代わるときにだけ、画像が縦に伸びてしまいます。改善策を教えてください。
header{
height: 100vh;
background: url(image1.jpg);
background-repeat: no-repeat;
background-position:0px 20px;
background-size: cover;
transition: background-image 0.3s ease-in-out;

}

header onclick="changeBackground()"

const backgrounds = [
'url("image1.jpg")',
'url("image2.jpg")',
'url("image3.jpg")',
'url("image4.jpg")',

];

let currentIndex = 0;

function changeBackground() {
currentIndex = (currentIndex + 1) % backgrounds.length;
// document.header.style.backgroundImage = backgrounds[currentIndex];
const header = document.querySelector('header');
// ここで背景画像のURLを設定
header.style.backgroundImage = backgrounds[currentIndex];

}

追加で、ここで質問するときに、<>のタグで囲うとコードが表示されないのはどうしてでしょうか。