Stopping text from fading along with the background

1

Hi,

I have started to build a new portfolio page and am stuck at this point where I cannot keep the foreground text from fading along with the background image.

A little guidance here along with some tips to remember moving forward, would be greatly appreciated!

Here is the link:

Thanks everyone!

2

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 h1 and 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 h1 and 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

1 Like
3

Thanks @MindOfThomas. That is exactly what my problem is.

While outlining the text is a great idea, here I am trying to fade the background image with a white tint. (Using the opacity:0.5 property)

This is giving a white tint on my background image as expected. But it is also fading my text in the front. Which is want I do not want.

Have been reading many articles on stackoverflow. Tried the z-index property as mentioned in some forums and also tried the rgb(255,255,255,0) property but with no luck.I am not sure what exactly is going wrong.

Here is what I mean : link