Bootstrap carousel caption opacity

Question

I have created an image Carousel using Twitter Bootstrap 2.3.2 but when resizing the browser/viewing on a smaller screened device the caption background loses it opacity.

An example can be seen on the bootstrap website (try resizing the browser to mobile screen size, the caption background changes to a solid color).

What is causing this?

How can this be overridden?

Solution 1

When at a smaller screen size the 'position' of the .carousel-caption element becomes 'static' rather than 'absolute' thus placing the caption under the image.

The above happening is giving the impression that the opacity has changed when it actually hasn't.

On a smaller screen if the .carousel-caption element was still on top of the actual carousel image you would hardly be able to see the image itself.

You can make it happen by changing that element to be position: absolute on smaller screens in your stylesheet if you like but I'd recommend leaving it the way it is.

Something like this should probably work in your stylesheet:

@media (max-width: 767px) {

    .carousel-caption {
        position: absolute;
    }
}

Solution 2

You can adjust the opacity in your CSS, where 0.35 is the opacity. Higher number -> less opacity

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