When getting outer html of an html element with JavaScript. It is not getting background image property

I want to get outer html of defined html element with Javascript on button click event. It is giving out put well but except it is not getting background-image property of inline style.

<!DOCTYPE html>
<html>
<body>
<div style="display: none;">
<div id="form" style="display: inline-block;background: rgb(221, 221, 221);background-image: url(https://www.w3schools.com/html/img_chania.jpg);">
    <form action="/action_page.php">
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname" value="John"><br>
        <label for="lname">Last name:</label><br>
        <input type="text" id="lname" name="lname" value="Doe"><br><br>
        <input type="submit" value="Submit">
      </form> 
</div>
</div>
<div id="test"></div>

<p id="testP"></p>

<p>Click the button to alert the outer HTML of the h1 element:</p>

<button onclick="myFunction()">Alert Header</button>

<script>
function myFunction() {
  var x = document.getElementById("form");
  var y = document.getElementById("test");
  var z = document.getElementById("testP");
  x.style.background="#ddd";
  y.innerHTML=x.outerHTML;
  z.innerText=x.outerHTML;

}
</script>

</body>
</html> 

I want to get the outer html with background image style property.

Answer

As you can see in the below snippet, I have removed the line to replace the background of x, hence it is working as expected.

If you are planning to remove the background of y only, you need to find the element (#form) inside y and replace it with #ddd.

function myFunction() {
  var x = document.getElementById("form");
  var y = document.getElementById("test");
  var z = document.getElementById("testP");
  y.innerHTML=x.outerHTML;
  z.innerText=x.outerHTML;

}
<div id="form" style="display: inline-block;background: rgb(221, 221, 221);background-image: url(https://www.w3schools.com/html/img_chania.jpg);">
    <form action="/action_page.php">
        <label for="fname">First name:</label><br>
        <input type="text" id="fname" name="fname" value="John"><br>
        <label for="lname">Last name:</label><br>
        <input type="text" id="lname" name="lname" value="Doe"><br><br>
        <input type="submit" value="Submit">
      </form> 
</div>
</div>
<div id="test"></div>

<p id="testP"></p>

<p>Click the button to alert the outer HTML of the h1 element:</p>

<button onclick="myFunction()">Alert Header</button>