Wie kann ich einen Text in die Mitte bringen?
So wie ich es versucht habe, funktioniert es ab einer bestimmten Größe nicht mehr! Und gibt es eine Möglichkeit sicherzustellen, dass das Bild zuvor geladen hat?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Titel</title>
<style>
body {
background-image: url("bild.png");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
overflow: hidden;
}
h1 {
color: white;
font-family: Geneva, Verdana, sans-serif;
font-size: 200px;
text-align: center;
/*transition: padding-top 1s,padding-bottom 1s,font-size 1s;*/
padding-top: 38vh;
padding-bottom: 70vh;
}
h1 {
/*animation-name: titel;
animation-duration: 6s;
animation-delay: 6s;
animation-fill-mode: forwards;*/
animation: titel 6s 6s forwards
}
@keyframes titel {
from {padding-top: 38vh; padding-bottom: 70vh;font-size: 200px;}
to {padding-top: 0px; padding-bottom: 0px;font-size: 80px;}
}
p {
color: aliceblue
}
</style>
<script src="script.js"></script>
</head>
<body>
<h1>TITEL</h1>
<p>Test-Text</p>
</body>
</html>
