Opaque background images

I’m finally working on reskinning my personal blog and really enjoying the Gatsby ecosytem. I wanted to add a little color to the boilerplate, and to demonstrate to all observers that my stylistic bent is solidly stuck in the 90s.

Poking at the Gastby way of loading content, such as the avatar, it seems that the preferred way is to load the asset using graphql:

query BioQuery {
  avatar: file(absolutePath: { regex: "/profile-pic.jpg/" }) {
    childImageSharp {
      fixed(width: 50, height: 50, quality: 95) {
        ...GatsbyImageSharpFixed
      }
    }
  }
  ...

It turns out that there is a plugin for everything in Gatsby, including one for adding background images using react. Any front-end developer worth their salt would read those docs, get super excited about processing background images at runtime. I am not that developer. I used css.

body::after {
  content: "";
  background: url(../content/assets/splatter-background.png);
  background-size: contain;
  opacity: 0.2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
}