<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
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.