How to background image in bootstrap

Here are four popular issues that appear when setting the background image on Bootstrap:

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:

 
Big Title

CSS:

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

Here’s an example with Jquery and without Flexbox:

HTML:

 
Big Title

CSS:

.banner {
 display: table;
 width: 100%;
}
 
h2 {
 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:

 

 

 
Big Title
 
Sub Title
 
 

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.

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

 

 

 

 
 
 

 
A beautiful premium Bootstrap 4 UI Kit.
 
 .
 

See a Pro Bootstrap 4 UI KIT – Awesome Bootstrap Background Images Included

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:

 

 

 

 

 
Paper Kit 2
 
PRO
 

 
 
 

 
 
 

Make your mark with a premium Bootstrap 4 UI Kit!