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?
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.
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 … the text is white, but it has a black outline to make it visible against the light parts of the image.
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: