#Overlay text on image html how to

Use a separated element for the gradient (pseudo-element or an empty ).When implementing the gradient overlay, we have two options: Given that, I will focus a bit more on it. Generally speaking, the gradient overlay is the most common solution for making the text on an image much clearer. Why? Because it’s so easy to add a gradient layer and the text won’t be accessible. The ones that need more care are the gradient solutions. Let’s get an overview of them.Īs you’ve seen, there are different solutions to the problem. There are different solutions for making the text easier to read. Adding that layer can be challenging, and I have seen many who implement this solution without taking accessibility in mind. To solve this, we need to add a layer below the text so that it can be easy to read. Notice that the version without a gradient overlay is barely readable. When designing a component that has text above an image, we should take care of making the text easy to read. IntroductionĮach solution is supposed to solve a problem.

#Overlay text on image html how to

In this article, I will explore the different approaches and solutions for this problem, and how to communicate the UI with a front-end developer to make sure that it’s implemented as per the design mockup since some details can be easily missed in CSS. I got encouraged to write this article after seeing this tweet from Addy Osmani. There are some different solutions like adding a gradient overlay, or a tinted background image, text-shadow, and others. In some cases, the text will be hard to read depending on the image being used. You might come across a UI component that has text above an image.