<p><a href="//izzy.blog/layer-backgrounds-css">Tutorial on izzy.blog</a></p>
html{
height:100%
}
body{
background: rgb(101,66,126);
background-image:
url("https://www.transparenttextures.com/patterns/food.png"),
url("https://www.transparenttextures.com/patterns/notebook-dark.png"),
linear-gradient(149deg, rgba(101,66,126,1) 0%, rgba(255,68,48,1) 50%, rgba(255,253,137,.75) 100%);
display: grid;
height:90%;
place-items:center;
text-align:center
}
a{
background:rgba(199,199,199,.7);
border-radius:1rem;
color:#333;
font-weight:700;
padding:1rem;
text-decoration:none;
transition: background-color 0.2s ease-out
}
a:hover{
background:rgba(199,199,199,.9);
text-decoration:underline
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.