The Jumbotron Section

The Jumbotron section (or Hero section) is the special area on your website which is designed to draw extra attention to some special content or information. You can use this section to drive your website visitors to buy something, present important information, give you a lead or go to another place on the website.

The background image in the Jumbotron section uses a "cover" functionality (CSS3), meaning the browser automatically scales the image as large as possible and maintains image aspect ratio so the image does not get squished. The image "covers" the entire width and height of the container (Jumbotron section). When the image and container have different dimensions, the image is clipped either at the top and bottom edges, or the left and right edges.

It is hard to tell what the exact image size you should have in this section because the height of the Jumbotron section is dynamic and it depends on the amount of content you have in it. Also, the width of Jumbotron section is varying depending on the container width of your website and a screen resolution. All these aspects highly affect how a background image will be shown in the Jumbotron section.

Preventing the Background Image from being Cut-Off

It is possible to disable the "cover" functionality by using a custom CSS. You can display an original image without cutting off anything but it will cause some styling issues such as leaving some space either vertically or horizontally, or making your image to look squashed. Apply this custom CSS at your own risk:

Solution #1:

#jumbotron-section .header-image {
    -webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
}

Solution #2:

#jumbotron-section .header-image {
   -moz-background-size: 100% 100%;
   -webkit-background-size: 100% 100%;
   background-size: 100% 100%;
}

Still need help? Contact Us Contact Us