Do you mean how the text becomes difficult to read over some of the background image? I’ll assume that’s what you mean.
For situations like this, I would either:
- Add a white (or any lighter color) outline to the text.
- Using a method found on StackOverflow, I just added the text shadow to the
p tags. The paragraph text doesn’t look right, but you might try experimenting with the shadow color.
- The CSS syntax doesn’t look pretty, but it’s what I always use. I recommend looking through the StackOverflow post at the different ways you can accomplish the same effect.
- Add a “highlight” effect to the text (again just any lighter color that looks good).
- Here’s what that it would look like. All I did was wrap your text in the
p tags with a
span tag, and set the background color of the spans to white.
- You can Google “css highlight effect” to check out different ways to pull the effect off.
Either way the idea is to have two levels of contrast in the text so that when it’s over a dark spot in the background image, you can see the lighter color and when it’s over a light spot in the background you can see the darker color.
I don’t have much for tips on this kind of thing besides just ply around with things. If you get something to look how you like, do your best to examine and make sure you understand how and why it works, that way when you need to do it again (99 times out of 100 you’ll need to do it again) it won’t take as long to figure out.
I hope that helps! Let me know if I didn’t answer your question