Make text readable on arbitrary background image

Jeroen picture Jeroen · Aug 19, 2013 · Viewed 7.6k times · Source

I am using the carousel component from the new Bootstrap 3 RC2. However, I noticed that in practice the caption is often not readable because my pictures very a lot in color. The previous Bootstrap 2.3 used a black gradient for captions but that seems to have been removed.

What would be a way to style my caption with CSS to make them readable against arbitrary images? I have tried to play with shadow and background-color, but that just gets incredibly ugly.

Here some example code: http://bit.ly/1eX8Tz9

Answer

Akshay Khandelwal picture Akshay Khandelwal · Aug 19, 2013

In order to get the content displayed on the gray semi-transparent background

Just Add the following code to your css

.carousel-caption{
    background: rgba(0,0,0,0.5);
}

See the Demo Here