diedVIPs

html knowhow

Background-Bild mit Textscrolling









Feststehender Header

Siehe oben

Mit dem Befehl "header" beschreiben ein Element, das beim scrolling stehen bleibt .

Quellcode
<html>
Hier nichts

<style type="text/css">
Hier nichts
</style>

<body>
<header>
<div style="left: 2%;top: 2em;position:absolute;height: 2em;width: 5.6em">
<a href="../index.html"><img src="../Bilder/HKhlogo.jpg" style="width: 100%;height:auto;" alt="diedVIPs" class="auto-style20" /></a></div>
<div style="left: 15%;top: 1.5em;position:absolute;height: 2em;width: 17.6em" class="auto-style1">
<h2 class="auto-style1">html knowhow</h2></div/>
<div style="left: 13%; top: 1.2em; position:absolute;height: 1em;width: 32.8em; color: #790D97;"><h1 style="font-size: 1.5em">
<strong>Background-Bild mit Textscrolling</strong></h1></div/>
</header>

</body>
</html>


Feststehender Hintergrund

Siehe folgend

Mit dem Befehl "parallax-background" beschreiben Sie, dass ein Bild im Hintergrund der Siete an einem festen Platz stehen bleibt.

Quellcode
<html>
Hier nichts

<style type="text/css">
#parallax-background {background-image: url("Bilder/Life.jpg"); width: 100%; height: 400px; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; text-align:center;}
</style>

<body>
<div id="parallax-background"></div>
</body>
</html>
So sieht´s aus




Feststehender Footer

 Siehe unten
Mit dem Befehl "hintergrundbild" beschreiben Sie, dass ein Bild im Füß der Seite an einem festen Platz stehen bleibt.bleibt.
Quellcode So sieht´s aus
<html>
Hier nichts

<style type="text/css">
div#hintergrundbild {background-image: url(Bilder/Life.jpg);background-size: cover;}
div.container {color: rgb(255,255,255);background: linear-gradient(rgba(255,20,20,0.7), rgba(12,10,255,0.6));padding: 35px;}
</style>

<body>
<div id="hintergrundbild">
<div class="container">
Mit dem Befehl "#vier" beschreiben Sie den Rand sowie die runden Ecken des Bildes. da es sinnvoll ist, das Bild in einen <table> einzubinden, können Sie einmal die Größe bestimmen
und den Rand zur Umgebung. Da Ihr Originalbild in der Regel eine andere Größe hat, wie Sie es in der Webseite darstellen wollen, packen Sie es in.</div>
</div>

</body>
</html>