How to make white text readable with light background images?
I have a fullscreen image that takes lots of white and transparent elements on top (logo, text, buttons).
I add a drop-shadow to the elements, but when the image is to bright, it is still difficult to read some of the text.
What tricks do you use to accomplish readability?
I am using tailwind, btw.
Edit: Add an example.
33 Replies
Are you using grid to overlay image and text or is this a div with a background image?
If the latter, add a background color to the div with the background image then use background-blend-mode and play around with the values to find the effect you want probably multiply as it grabs the darkest of the two. You can also do a gradient as you can have two bg images (gradients are background images not background-colors).
Alternatively you could use a pseudo element (not on the image if it’s an actual image in the DOM and not a bg image) to add a gradient or bg colour with opacity.
Lmk if that makes sense.
maybe try adding a small solid
-webkit-text-stroke?alternatively, a text-shadow as well
text-shadow: 0 0 2px red, 0 0 2px red, 0 0 2px red, 0 0 2px red, 0 0 2px red; <-- this is perfectly valid
it isn't as good, but worksit looks ... passable
you could use a hover effect to darken the text at time of reading. more interactivity. and simple.
hover is pretty awful on a phone
it's more of a focus emulation than an hover
Gotta jump in here and say that adding a text-stroke to this design would probably make it look really dated. Problem is your image. You could put a darker overlay on top but the image itself isn't good for a hero. Typically you'd want to find/make an image that has a lot of whitespace and put the text in that whitespace
thanks for all the help guys, i went with a mix. linear gradient in the top section, where the menu options are, and used a drop-shadow in the text and buttons. It works fine and the design language is consistent.
i will take a look at background-blend-mode as i didn't know that it existed
can you share the final result? just out of curiosity
sure, here it is
that looks good, in my opinion
lol i love that the photo shows how chaotic the beaches are there
they look like canned sadines
maybe you could whip some photoshop magic and delete the people
that hotel has plenty of money to take better photos, so, maybe they can take some while the hotel doesnt have a lot of people
Make sure to play with the browser size to make sure all the text is readable when the photo isn't as wide .
oh, yeah, thats a good point
by the way, you should focus on how it looks on mobile
that hotel is in a touristic zone, so, i presume most people will be using it on a phone
I would still use a background -color or another background-image gradient with background blend mode multiply or a pseudo element with low opacity to just solve some of these problems instead of worrying about changing every text element at every screen size .
As a side note , watch the alignment of your elements. The buttons on the bottom have like 5px of padding but the dark button on top has no padding , extends to the edge of the screen then the hamburger menu has like 10px.
that's actually a very good idea
A tad late, but you could also use a long exposure with a strong ND filter to remove people
that sounds expensive
i highly doubt that that hotel would ever pay anything for anyone to take professional photos for promotional material
Ehhh, depends if they have a real camera or not. If there’s a real camera then that filter isn’t too expensive
it's an hotel
the budget for marketing is "the least as possible"
and honestly, why hire someone to take photos when you can ask some secretary to take the photos?
guys, thanks for all the feedback
actually, the photos are taken by a paid professional and they are not cheap i assure you. i will get back to him and suggest some edits
hand yeah, the hotel is in a very touristic zone, but people love it like that, to be in the crowd.
AI can get rid of those ppl in one click. But he’ll still charge for an hr of editing 🤣
that's interesting 🤔 a hotel in that area actually paying for marketing material
actually i think it's better to see people in the beach 😆
people come here on hollidays because of all the buzz
i mean, it does make it seem more "human", but do we need reminders of how people look like canned sardines in overcrowded beaches?
hahaha, i get you. but in the picture it is not even 10% of what it normally is on the summer
i know
specially on that beach, which is one of the most famous ones in the area
by the way, on the right side, is that a piece of the next image?
it's a mirror i guess
right next to a tv?
it's not right next but
it's like a glassy kind of wall before the bathroom
yeah, but looks so funky
i think you can add a mask layer to reduce the brightness a little bit and provide more definition to your text
https://www.youtube.com/watch?v=cLyzBfXI0I0&list=PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit&index=16
refer to 28:54 of this tutorial
Dave Gray
YouTube
CSS Background Images and Responsive Image Properties for Beginners
Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
Learn about CSS background images and responsive image properties in this full tutorial for beginners. Resize your images by browser size and set great backgrounds where text content is still the main focus.
🚩 Subscribe ➜ https://bit.ly/3nGHmNn
🚀 This lesson is part ...