Geek Answers Handbook

Text background color

I have a responsive site that has a background image with a dynamic size that has some dark and light areas. In the browser, the font colors are adjusted to have good contrast in the color of the background image.

Unfortunately, in a flexible (mobile) design, some text is superimposed on top of the darker parts of the size background image, and the text can be very difficult to read. Does anyone know about a plugin or jQuery method in which text can be informed about the background image behind it and change the style / color accordingly?

+7
source share
2 answers

you can use text-shadow to mark the edge of your text.

body { /* your rules */ color: rgba(0 , 0, 0, 0.8 ); /* just a guess that it might be black;*/ text-shadow: 0 0 1px gold, 0 0 3px white; /* choose how many and which colors */ }

This is an idea

+2
source

What you ask will basically entail the following:

  • the purpose of each word in the text to be wrapped with <span>
  • use% position on the top / left to find a place in the picture, and dynamically assign color to the spans that fall into this area.

Due to the lack of a better word, NOT NOT . This is ridiculous, and there is too much overhead to rationalize.

Why not just give a translucent background to the text container so that it stands out more?

 .Container { background-color:rgba(0,0,0,0.5); }

This provides a light shade for the text that needs to be stroked over the image, but at the same time showing the entire image on the page.

Solving the text shadow is also a good idea, but it’s just the head that it won’t work on IE9. My solution will work on IE9, but not on IE8-, which does not mean that it is better, but just something that needs to be kept in mind.

+1
source

More articles:


All Articles