Front-End Development

Proper implementation of background images w/ text inside responsive carousels

Abstract Background@1x.jpg

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)

Bootstrap's desktop view

(Mobile view)

Bootstrap's 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

Covid 19
COVID-19: Digital Insights For Enterprise Action

Access Perficient’s latest insights into how you can leverage digital technologies to not only respond to the pandemic, but drive your operations forward and deliver experiences your customers need.

Get Informed

(Desktop view)

foreground desktop view

(Mobile view)

foreground 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)

background desktop view

(Mobile view)

background 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:

foreground example

(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”)

background example 1

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

background example 2

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?

About the Author

These days, Ben loves the people he works with, and he loves what he does. Ben specializes in front-end development (HTML5, CSS3, LESS, SASS, JS, GSAP and Photoshop / Illustrator / Sketch App).

More from this Author

Thoughts on “Proper implementation of background images w/ text inside responsive carousels”

  1. Hi,

    Could you help how i can go about for the page editor mode code for editing the background image?

    Thanks,
    Ramyanka.

  2. In developing Sitecore, we often have to make special rendering “exceptions” when dealing with page editor mode. It’s a good idea to understand that

    1. Page editor doesn’t “see” anything that is hidden in the page (such as carousel items), so these need to be flattened out
    2. Using inline styles for backgrounds is fine, but in page editor mode, you’ll need to use the Sitecore field rendering to allow the user to edit the image as a foreground item

    The second part means using the Sitecore PageMode to determine the state of the page (pardon to untested code)….

    if ( Sitecore.Context.PageMode.IsPageEditorEditing) {
    // render the field as a foreground element
    @Html.Sitecore().Field("Some Image Field")
    } else {
    ImageField imageField = Model.Item.Fields["Some Image Field"];
    var path = imageField == null ? String.Empty : imageField.GetMediaUrl();

    ...

    }

  3. HI Brian,

    I am facing a problem related to background images implementation in Sitecore. I want the background image of a whole page to be editable when viewed in Sitecore Page Editor mode. I have tried Fieldrender and Sc:Image but i am not able to setup the same. Can you please help how this can be achieved.

    Cheers
    Rajiv

  4. Hi Brian,

    The image scales great on mobile, but how to scale down the font size in mobile view?

    regards

  5. Hi Brian,

    Perfect Explanation with examples !!!! This is what i want !!! thanks a lot dude !!!

  6. Thank you!
    I’ve been looking for a good tutorial cause I noticed bootstrap’s way is wrong (still wrong in 2016)
    I finally resolved this 😀

  7. This is great. Helped with the unwanted gray padding on extra large devices and a too tiny carousel on mobile. Thank you!

  8. Hi!

    Is there a way to make the carousel pane template accept videos as content, instead of a background image? And if not, how can Score handle clickable images for each carousel pane?

    Thanks!

  9. Hello! Videos are a completely different animal than background images. As of now, you can only insert a background color or image for each pane. There isn’t a way out of the box to include a background video. You can insert a foreground video with our Youtube component though. If you need a clickable image, try using the image button component. Since it is a button, it will be a foreground element as well.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to the Weekly Blog Digest:

Sign Up