How to Add a CSS Gradient Overlay to a Background Image

Working with Text and Images

(Prefer to watch a video? This article is a companion piece to my Decoded by Christina series on YouTube.)

Using images on a web page helps to add visual interest. But figuring out how to place text on top of the image, while making sure you can still read it, can be challenging. There are a few different ways to get around this issue.

Option 1: Choose the right image

The easiest option is to use images that have a big blank area for your text or doesn’t have a lot of detail.

If you don’t have your own photos, there are plenty of free and paid options for stock photography such as Adobe Stock or Unsplash.

Option 2: Edit the image

Maybe there’s a specific photo that you want to use but it doesn’t have any blank areas for text or has a lot of detail. Another option is to use Photoshop or other image editing software to change the overall color profile of…