How to background image in bootstrap
|
Here are four popular issues that appear when setting the background image on Bootstrap: Show
1. Responsive imagesImages in Bootstrap are made responsive with 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: CSS: .banner {
height: 100vh;
/* Flexbox */
display: flex;
align-items: center;
}Here’s an example with Jquery and without Flexbox: HTML: 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: 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 Awesome Bootstrap Background Image Examples1. 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 |