diedVIPs

html knowhow

Vollbild-Modus










In den Vollbild-Modus umschalten

So sieht´s aus
Dies wird ein Vollbild



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: 400px;padding: 25px;border: Solid 1px Silver;}
div.title {color: Orangered;}
button#button {background-color: Transparent;width: 250px;border: Solid 1px 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 >
<center><div id="fullscreen">
<div class="title">Dies wird ein Vollbild</div>
<p><button type="button" id="button">Vollbild 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></center>

</body>
</html>










Kontakt    Datenschutz    Impressum