Technique for text displayed on changing clear or dark background

Get Started
1

Hi,
I have some text displayed on changing background, either clear or black or both.

I need the text to be always clear and visible. Are there any technique, with css or other to make the text always clear ? Is it possible to have a some contour with CSS, or any other technique.

What would you suggest ? (Live example welcome)

Thanks

2

One method would be to have, let’s say, white text with a black outline. In an ideal world, you could use the CSS text-shadow property, but as that isn’t supported by IE8 and below (not sure about IE9), it’s a bit of a non-starter for public deployment.

Is the background going to be actually changing, or just various different colours and shades in different places?

3

Thanks for answer. What do you mean exactly by a black outline ? Just a bg color in a div ?

Text will be on photos, which are user submitted photos, thus can be of any undetermined composition. user will cycle trough photos, and there will be a text on it. Text is pulled from a database, and is also changing with each picture, so I can’t just put an image there.

4

[ot]

You would think MS would have finally implemented text-shadow in IE9. They haven’t. It’s a bit sad …[/ot]

5

Ah, I get what you’re trying to do now.

What I meant by a black outline was something like this.

In the first picture, with plain black text, the text is invisible against the dark part of the image.
In the second picture, with plain white text, it is invisible against the light part of the image.
In the third picture, it’s like baby bear’s porridge … just right :cool: … the text is white, but it has a black outline to make it visible against the light parts of the image.

744×190 150 KB

Unfortunately I’m not aware of any way to achieve that with CSS that works in IE…

A second option is to put the text on a semi-transparent block, so that you can still see the background image through it, but it provides enough contrast that the text remains legible whatever the background colour behind it. Something like this:

That should be a very simple thing to achieve, except again, IE comes along and chuggers the whole thing up by not recognising RGBa (alpha transparency colour selection).
Put the text inside a <div> and give it this style:

background: rgb(255,255,255); [COLOR="DarkOrange"](1)[/COLOR]
background: rgba(255,255,255,0.5); [COLOR="DarkOrange"](2)[/COLOR]
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#88ffffff, endColorstr=#88ffffff); [COLOR="DarkOrange"](3)[/COLOR]
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#88ffffff, endColorstr=#88ffffff)" [COLOR="DarkOrange"](4)[/COLOR]

COLOR=“DarkOrange”[/COLOR] Sets the basic background to white, for browsers that don’t support RGBa
COLOR=“DarkOrange”[/COLOR] Overrides rule (1) and sets the background to white at 50% opacity, for browsers that do support it
COLOR=“DarkOrange”[/COLOR] Fudge for IE5.5–IE7
COLOR=“DarkOrange”[/COLOR] Fudge for IE8.

6

Thank you very much for your answer, I’m going to try what you suggest.

7

Nice work Stevie D, the second option looks great. Will have to remember this technique for the future.

8