Gallery
Newsletter
Subscribe for awesome tech news
By voidman on Sep 05, 2025 13:05
<html>
<head>
<title>Image background</title>
<style>
.box {
background: url("/pics/dslayer.jpg");
height: 100vh;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
h1 {
background-color: aqua;
background-clip: text;
-webkit-background-clip: text;
color: transparent;
margin-bottom: 20px;
}
.text {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
flex-direction: column;
}
#button {
font-size: 35px;
color: greenyellow;
background: linear-gradient(45deg, purple, blue);
border: 5px solid red;
padding: 14px;
border-radius: 20px;
text-decoration: none;
transition: all 0.3s ease;
}
#button:hover {
color: greenyellow;
background: linear-gradient(45deg, green, skyblue);
border: 5px solid red;
transform: scale(1.7);
}
</style>
</head>
<body>
<div class="box">
<div class="text">
<h1>What I know , what I do, what I perform
can be changed by effort</h1>
<a href="#" id="button">Watch demon slayer</a>
</div>
</div>
</body>
</html>
Subscribe for awesome tech news