Overlaying text on a background image

July 13, 2020

I am beginning to realize that when trying to solve a new problem in Gatsby, a smart solution is to first look for a plugin. I’ve spent some time browsing through the entire plugin and starter library on Gatsby(even those with very few downloads at the very end, which could be new) just to familiarize myself with what’s out there. I’ve found some cool starters way down on the starter list and also found the gatsby-plugin-page-progress plugin which I plan to incorporate into this website later.

Getting back to point, gatsby-background-image is what one needs to overlay text on a background image. Gatsby.js has a good amount of documentation on it, but needing something simpler, I found a good YouTube video that walks you through it.

YouTube: How to use the Gatsby JS Background Image Plugin

This website is beginning to look very spiffy. The blazing fast power of Gatsby is now beginning to shine through and I am quite enjoying watching this website take shape. I’ve had some trouble positioning the text just right and need to understand CSS positioning better.


tufan.io
Making it simple to create, manage & secure cloud applications.