Bild im Vollbild zeigen

Quellcode

<html>
<head>

<style type="text/css">
div#fullscreen {background-image: url('../Bilder/Life.jpg');
background-size: cover;background-attachment: fixed;background-repeat: no-repeat;height: 650px;padding: 25px;border: Solid 1px Silver;}
div#fullscreen:fullscreen {font-size: 1em;letter-spacing: 2px;}
div.title {color: transparent;}
button#button {background-color: Transparent;font-size:1em;color:white;width: 300px;border: Solid 0px rgba(86, 187, 248,0.8);transition: background-color 0.5s;}
button#button:hover {cursor: Pointer;background-color: rgba(135,206,250,0.8);}
</style>
<head>

<body >
<div id="fullscreen">
<p><button type="button" id="button">umschalten</button></p>
</div>

<script>
let fullscreen = document.querySelector("#fullscreen");
let button = document.querySelector("#button");

button.addEventListener("click", () => {
if (!document.fullscreenElement) {
fullscreen?.requestFullscreen();
} else {
document.exitFullscreen();
}
});
</script>
</body>

</html>