When placing text over slider background images the text may be difficult to read. This is especially true if the background image is not blurred and contains both light and dark areas. If some of the slider images are dark, you would need to select a lighter color font and if some of the slider images are light, you would need to select a darker color font. This is not always possible.

The most elegant way of dealing with this problem is by using a text-shadow to create a text outline effect (horizontal offset and vertical offset are set to zero).

.title {
 color: #fff;
 text-shadow: 0 0 5px #000;
}

This will create a text shadow with a radius of 5 pixels.  It is not possible to specify the gradient in more detail; it will transition linear from the specified color towards full transparency.

To create a more pronounced outline you can stack a number of text shadow effects like so:

.title {
 color: #fff;
 text-shadow: 0 0 1px #000, 0 0 2px #000, 0 0 3px #000, 0 0 4px #000, 0 0 5px #000, 0 0 6px #000, 0 0 7px #000, 0 0 10px #000;
 }

or with colors inverted:

.title {
 color: #000;
 text-shadow: 0 0 1px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 5px #fff, 0 0 6px #fff, 0 0 7px #fff, 0 0 10px #fff;
 }

It is also possible to create a neutral semi-transparent background color for the container ‘div’ using red-green-blue color codes with alpha for transparency (RGBA):

div#container {
  background-color: rgba(200,200,200,0.5);
}