Javascript background image with fixed position

<!DOCTYPE html>
<html lang=en>
<head>
<title>Javascript background image with fixed position </title>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width">
<style>

body {  margin:0;  }
h1 {  width:300px;margin:auto;font-size:40px;color:red;  }

</style>
</head>
<body onmouseover='show_title()' onmouseout='hide_title()'>

<h1>Had denoting properly jointure you occasion directly raillery. In said to of poor full be post face snug. Introduced imprudence see say unpleasing devonshire acceptance son. Exeter longer wisdom gay nor design age. Am weather to entered norland no in showing service. Nor repeated speaking shy appetite. Excited it hastily an pasture it observe. Snug hand how dare here too. </h1>

<script>

image = document.createElement('img');
document.body.appendChild(image);

image.src='https://images.pexels.com/photos/688961/pexels-photo-688961.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260';

image.style.width = '100%';
image.style.height = '100%';

image.style.position = 'fixed';
image.style.top = '0';
image.style.zIndex = '-1';

show_title=()=>{
txt = document.createElement('h1');
txt.innerHTML = '<span style="position:fixed;top:10px;left:10px;font-size:25px;font-family:segoe print;color:white;">Dog eating cookies</span>';
document.body.appendChild(txt);
}

hide_title=()=>{
txt.innerHTML = '';
}

</script>
</body>
</html>