Beispiel:Hero-3.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style>
html, body, header, h1, img {
padding: 0; margin: 0; overflow-y:hidden;
}
html {
background-color: #a2a44c;
}
header {
position: relative; height: 100vh;
}
header img {
width: 100%; height: 100%;
}
header h1 {
}
- eins {
position: absolute; top: 10%; left:50%;
}
- zwei {
position: absolute; top: 20%; left:50%;
}
text {
fill:none; stroke: yellow; stroke-width: 1;
font-family: Arial, "Garamond";
font-size: 2em;
}
@media all and (min-width: 60em) {
text { font-size:2.8em; }
} footer {
position: absolute;
bottom: 0.5em; right: 1em; color: white; }
</style> <title>Hero-Image Webseite</title>
</head> <body> <header>
<img src="//wiki.selfhtml.org/images/f/f3/Narzisse-m.jpg"
alt="Osterglocke als Zeichen des Frühlings, Quelle: Wikipedia"
srcset="//wiki.selfhtml.org/images/e/e7/Narzisse-lg.jpg 4140w,
//wiki.selfhtml.org/images/f/f3/Narzisse-m.jpg 1920w,
//wiki.selfhtml.org/images/0/09/Narzisse-sm.jpg 1000w">
<svg id="eins"> <text x="1" y="100"> Frohe </text> </svg> <svg id="zwei"> <text x="1" y="100"> Ostern! </text> </svg>
</header> <footer> <a rel="license" href="https://commons.wikimedia.org/wiki/File:Narzisse.jpg">Narzisse von Martin Hirtreiter</a> (CC BY-SA 3.0) </footer> </body> </html>
