Untitled

<html>
  <head>
    <title>Background changer</title>
    <meta charset="utf-8"/>
    <style type="text/css">
     body {
       margin: 0;
     }
     #background {
       transition-property: background;
       transition-duration: 5000ms;
       transition-timing-function : linear ;
       z-index: -100;
       position: absolute;
       margin: 0;
       background : url(https://i.imgur.com/6IjDFqg.jpg);
     }
    </style>
  </head>
  <body>
    <div id="background"></div>
    <button onclick="chback(0)">Background 1</button><br/>
    <button onclick="chback(1)">Background 2</button><br/>
    <button onclick="chback(2)">Background 3</button><br/>
  </body>
  <script type="text/javascript">
     img = [
       'https://i.imgur.com/6IjDFqg.jpg',
       'https://i.imgur.com/Ai5Zbq1.jpg',
       'https://i.imgur.com/9jHOYe9.jpg',
     ];
     back = document. getElementById ('background');
     back . style . width = document . documentElement . clientWidth ;
     back . style . height = document . documentElement . clientHeight ;
     function chback ( n ) {
       back . style . background = `url(${ img [ n ]}})`;
     }
  </script>
</html>