How To Solve The Biggest Problems With Bootstrap Background Image

Images in Bootstrap are made responsive with .img-fluid. max-width: 100%;and areheight: auto; applied to the image so that it scales with the parent element.

The Bootstrap background image property sets one or more background images for an element.

The background of an element is the total size of the element, including padding and border (but not the margin).

By default, a background image is placed at the top-left corner of an element and repeated both vertically and horizontally.

Tip: Always set a background-color to be used if the image is unavailable.

The Ultimate UI/UX Design Course - Take the UI/UX best practices to the next level with our fully coded examples included! ⏰ 80% OFF Special Offer

2. How do I turn an image into an HTML markup using Bootstrap?

You override the CSS rule.

Personally, since a jumbotron is a Bootstrap element in general, I recommend you assign a class or id to the element in question, rather than changing the global jumbotron rules themselves.

.jumbotron{
 background-image: url(‘path/image.jpg’);
 background-size: cover;
 background-repeat: no-repeat;
}

You can do that to your CSS. Or instead of jumbotron that makes it global. Add a new class to your element. And replace “jumbotron” in the above css with the new class name.

3. How do I set a Bootstrap background image for a header?

You can set a Bootstrap background image for a header with JS or CSS Flexbox. Flexbox is not even required, but you can use it to align the content vertically within the container instead of using the good old display: table + display: table-cell or positioning (not so old, most of the people still use it).

Here’s an example with flexbox(Flexbox doesn’t work well with IE9 though.):

HTML:

<div class=”banner”>
 <h1>Big Title</h1>
</div>

CSS:

.banner {
 height: 100vh;
 
 /* Flexbox */
 display: flex;
 align-items: center;
}

Here’s an example with Jquery and without Flexbox:

HTML:

<div class=”banner”>
 <h1>Big Title</h1>
</div>

CSS:

.banner {
 display: table;
 width: 100%;
}
 
h1 {
 display: table-cell;
 vertical-align;
}

JS:

$(‘.banner’).css({‘height’: (($(window).height()))+’px’});
 
$(window).on(‘resize’, function(){
 $(‘.banner’).css({‘height’: (($(window).height()))+’px’});
});

Here’s another cleaner example, anything in between the hero div will be vertically centered.

HTML:

<div class=”banner”>
 <div class=”hero”>
 <div class=”container”>
 <h1>Big Title</h1>
 <h2>Sub Title</h2>
 </div>
 </div>
</div>

CSS

.banner {
 display: table;
 width: 100%;
}
 
.hero {
 display: table-cell;
 vertical-align: middle;
 height: 100%;
 margin: 0 auto;
}
 
.container {
 width: 1170px;
 margin: 0 auto;
}

JS:

// SAME AS IN THE PREVIOUS EXAMPLE.

Looking for some free coding tutorials? Check out TikTok blog special section!

4. How do I set Bootstrap background images for “Header” that automatically grab the entire width of a screen device but don’t look stretched or compressed?

It’s very simple to achieve this.

Simply add the following code to your header, or if you’re using Bootstrap, your jumbotron.

.jumbotron {
 background-image: url(path/to/img.jpg);
 background-attachment: fixed;
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
}
// Or short version

.jumbotron {

background: url(path/to/image.jpg) fixed center no-repeat;

background-size: cover;

}

Apart from CSS specified, you have to understand the following:

There are two kinds of images, one is raster and one is a vector.

PNG, BMP, JPEG are raster formats, they don’t stretch or compress well, however new browsers use bicubic resize algorithm to compress images correctly. If you use raster image, then you should tile image so that it doesn’t look broken.

With raster images, you can use either image bigger then maximum size ever needed, for example, background with 2000 pixels wide, will be resized to any page width lower than 2000 correctly by any latest browser.

Or else you should use tiling.

SVG is vector format, you can stretch and it resizes without any distortion.

SVG can be used as a background with any width.

Observation: SVG images and IE 10

In Internet Explorer 10, SVG images with .img-fluid are disproportionately sized. To fix this, add width: 100% \9; where necessary. This fix improperly sizes other image formats, so Bootstrap doesn’t apply it automatically.

Awesome Bootstrap Background Image Examples

1. Now UI Hero Photo

This is a screenshot from Now UI Kit PRO is a premium Bootstrap 4 kit provided by Invision and Creative Tim. It is a beautiful cross-platform UI kit featuring over 1000 components, 34 sections, and 11 example pages.

How it’s made: 

HTML

<div class=”wrapper”>
 <div class=”page-header clear-filter”>
 <div class=”rellax-header rellax-header-sky” data-rellax-speed=”-8">
 <div class=”page-header-image” style=”background-image: url(‘./assets/img/presentation-page/nuk-pro-back-sky.jpg’)”>
 </div>
 </div>
 <div class=”rellax-header rellax-header-buildings” data-rellax-speed=”0">
 <div class=”page-header-image page-header-city” style=”background-image: url(‘./assets/img/presentation-page/nuk-pro-buildings.png’)”>
 </div>
 </div>
 <div class=”rellax-text-container rellax-text”>
 <h1 class=”h1-seo” data-rellax-speed=”-2">Now UI Kit</h1>
 <div class=”pro”>PRO</div>
 </div>
 <h3 class=”h3-description rellax-text” data-rellax-speed=”-1">A beautiful premium Bootstrap 4 UI Kit.</h3>
 <h6 class=”category category-absolute rellax-text” data-rellax-speed=”-2">Designed by
 <a href=”https://invisionapp.com/” target=”_blank”>
 <img src=”./assets/img/invision-white-slim.png” class=”invision-logo” />
 </a>. Coded by
 <a href=”https://www.creative-tim.com” target=”_blank”>
 <img src=”./assets/img/creative-tim-white-slim2.png" class=”creative-tim-logo” />
 </a>.</h6>
 </div>

2. Paper Kit Pro 2

Paper Kit 2 PRO is a premium Bootstrap 4 UI Kit with a huge number of components, sections, and example pages. All the components are designed to look great together, following the same design pattern. Any elements that are vital to code a web project is already here, fully coded, including the background image on Bootstrap 4.

How it’s made:

<div class=”wrapper”>
 <div class=”page-header section-dark” style=”background-image: url(‘assets/img/sections/pk-pro-cover.jpg’)”>
 <div class=”content-center”>
 <div class=”container”>
 <div class=”title-brand”>
 <h1 class=”presentation-title”>Paper Kit 2</h1>
 <div class=”type”>PRO</div>
 <div class=”fog-low”>
 <img src=”assets/img/sections/fog-low.png” alt=””>
 </div>
 <div class=”fog-low right”>
 <img src=”assets/img/sections/fog-low.png” alt=””>
 </div>
 </div>

<h2 class=”presentation-subtitle text-center”>Make your mark with a premium Bootstrap 4 UI Kit! </h2>
 </div>
 </div>
 <h6 class=”category category-absolute”>Designed and coded by
 <a href=”https://www.creative-tim.com" target=”_blank”>
 <img src=”assets/img/creative-tim-white-slim2.png” class=”creative-tim-logo”>
 </a>
 </h6>
 </div>

3 Best Website examples of Designs with Big Background Images from AWWWARDS

1. Pottermore

To celebrate the first day of term at Hogwarts, Pottermore launched a fully interactive WebGL experience which gave users the chance to explore a 3D version of the school.

2. Inside the head

Inside The Head is an online publication inspired by the delusions, confusions, and illusions experienced by young adults.

3. KIKK Festival

KIKK is an international festival of digital and creative cultures. Its interest lies in the artistic and economic implications of new technologies.

4. Places with Amazing Free Stock Photos for Stunning Background Images

1. Unsplash

With a huge library of photos and hundreds more being added each day, chances are Unsplash got a photo for you. Find inspiration in the new photos we hand-select every day or use our search to find and download exactly what you’re looking for.

They have over 200,000 free (do whatever you want) high-resolution photos brought to you by the world’s most generous community of photographers.

2. Stocksnap

StockSnap is one of the best places on the internet to find beautiful free stock photos. They curate nothing but the highest quality images from a pool of submissions and feature them on the site free for download.

3. Burst by Shopify

Burst is a free stock photo site that is powered by Shopify. They have 1000’s of high quality and royalty-free images available and free to download. This includes a wide variety of images ready for you to choose from and create with.

They built this site to empower designers, developers, bloggers, and entrepreneurs to create stunning websites and marketing campaigns. You can use these pictures for just about anything — hero images on your blog or online store, backgrounds for school projects, shots for social media campaigns, client work, and beyond.

4. Gratisography

Free high-resolution pictures you can use on your personal and commercial projects. New awesome pictures added weekly!

All pictures were photographed by Ryan McGuire and free of copyright restrictions.

5. Picography

Free images to use however you like. You can not resell them Made in Ireland by Hidden Depth.

Can you use the images for commercial work?

Yes, it is up to you to decide how or where to use images. They do not provide model or property releases for any images. It is your responsibility to obtain relevant releases from models or property owners.

Extra: If you are looking to create awesome website backgrounds, we recommend you Fixthephoto, which offers an incredible image manipulation service. See for yourself!

That’s all folks!

Do you have any problems with your Bootstrap background image? We are happy to help! Let’s talk here, in the comments section.