Proper implementation of background images w/ text inside responsive carousels

I have been asked the question so many times now, I thought it would be a perfect opportunity to post a blog about it. This way I can just forward a link to people instead of blowing air at ’em.

Here it is: “Why can’t I just have an image in the foreground with text in a carousel?”, “Do I have to do it as a background image?”, “I don’t get it.”

It’s actually a pretty simple concept, thankfully. Typically your carousel image isn’t going to be a slideshow of ‘portrait’ oriented images. They are almost always oriented as ‘landscape’. What happens when a user is looking at a rectangle shape on a phone? All of a sudden they are basically looking at a sliver of a picture. The rectangle becomes squished inside of a square in effect (which is perfectly fine). But, what if there is text that needs to be associated within that little sliver of a picture? You’ve lost all of your height. Should it go to a microscopic font size?

Eeeaughhhh.

No.

And you know what? Bootstrap got it wrong too in one of their examples getboostrap.com. I think they’ve made a quick-fix to address it on their latest version by using a solid gray image instead of a real image. Download it and swap it out with an actual image. I dare you. I’ll show you the original version that includes the same markup but includes actual images, but I’ll get to that in a bit.

Anyway, time for some examples. We’ll go through three of them.

• Bootstrap’s way (WRONG, but close)
• Image in the foreground (WRONG)
• Image applied as a background (CORRECT)

Boostrap’s way

(Desktop view)

(Mobile view)

(The markup)

<div class="item">
<img src="img/slide-02.jpg" alt="">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-large btn-primary" href="#">Learn more</a>
</div>
</div>
</div>

Looks fine, right? The answer is no. The image in the ‘background’ has a preset height applied to it, so this means that it doesn’t scale properly. It gets distorted quite a bit via smaller screens. It may seem hard to tell since the image is kinda vague and blurry. Here’s an example.

See how ‘squishy’ the image gets as you change the viewport size? Bootstrap has answered this by providing a plain, gray image now instead.

Image in the foreground

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

(Desktop view)

(Mobile view)

(The markup)

<div class="item">
<img src="img/hero_05.jpg" alt="#">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget.</p>
<a class="btn btn-large btn-primary" href="#">Learn more</a>
</div>
</div>
</div>

The markup is the same as Bootstrap’s here, but now I have removed the fixed heights that their example contains. Now the height is being determined by the height of the content within each slide. Looks totally fine on larger screens, but look what happens when you get down to mobile… The image is now scaling properly, but holy shitake it gets small. Now we have text falling out of the bottom. Here’s an example.

Image applied as a background

(Desktop view)

(Mobile view)

(The markup)

<div class="item" style="background: url(img/hero_05.jpg) no-repeat left center; background-size: cover;">
<div class="container">
<div class="carousel-caption">
<h1>Another example headline.</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget.</p>
<a class="btn btn-large btn-primary" href="#">Learn more</a>
</div>
</div>
</div>

Voilà. Apply the image as a “background” in the HTML (this way images can be dynamically injected if needed). I’m showing the inline styles in the “.item” div for clarity. You’ll need to provide heights in your media queries to suit your needs. Remember, Bootstrap’s version has the heights applied too, but their way totally distorts the image. Here, it just clips the edges by using “background-size: cover;” and applying “center center” or “left center” for positioning. Here’s an example.

Conclusion

So, in effect, using Bootstrap’s example or using an image placed in the foreground you get this type of output:

(imagine the red square as the size of your mobile phone screen)

But by applying the image as a background image (set to “background-size: cover;”) you clip out the edges for a better finish, like so:

(Applied as “center center”)

Or as in the demo (Applied as “left center”)

This demo is strictly using Bootstrap’s carousel plugin, but the principle applies to any other carousel plugin. For the most part, they all include similar markup.

Make sense?