We are working on an app where users can create their own page and then upload a header image sized ~ 1344 x 420 px.

Over the image there will be some text imported from the database like title and description and an overlay color that the user can choose. But he cannot change text color that will be white.

Now we don`t know what images would the user upload,( the theme would differ a lot ) and how it will affect end result.

Are there any standards or ways to ensure that users will end up with a good looking header every time ?

image example

Current version today looks like this ... It is easier but looks uglier in my opinion. Any thoughts ?

enter image description here

  • 2
    We had a similar issue with an website, where the user could upload an header image for the frontpage, which contains white-text by default, and had some issues when the user uploaded some very bright images that would make the text unreadable. We just added a dark overlay which the user could set the opacity on, and 99% of the time, it would look good.
    – DennisW
    Nov 14, 2018 at 9:36

2 Answers 2


Use a CSS overlay -- either solid black with 40% alpha/transparency, or gradient that goes from dark to transparent. If you use a gradient, make sure your text is anchored toward the "dark part" of the section. Examples:

solid overlay Gradient overlay


I think you have two options.

  1. (Good) Show a preview (possibly at stage where user can zoom/crop their image?) with the text overlaid, and some microcopy explaining that users uploading very light images might experience difficulties?

  2. (Better) Use this microcopy even before the user uploads their image, so that it's a consideration for them while they're thinking about what image to select.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.