How to create a responsive background image in bootstrap. In this tutorial, we are going to create the responsive background image. When you are ready to create your project you might think that how to create background image responsively. Bootstrap will provide
.img-fluid to create responsive images. There is some limitation when placing the image in the background. You can’t use <img> to create responsive background image. So, In this article, we will show you how to create this.
We are using Custom CSS file to achieve this with using bootstrap. Follow this steps to create a responsive image.
- Create Style.css file
- Link this file to HTML file.
<link rel="stylesheet" type="text/css" href="styles.css">
- Create an HTML file and write HTML format.
- Import this code in Style.css file
we will insert code insert background image to the body. You can use <div> or <section> or any other HTML element also.
sometimes, top of the image top side not shown. if you can’t see the complete image then change background-position property.
if you want to take padding top then You can change it to
background-position:9%; and if you want to change it to padding left and padding-top then use
background-position:9% 9%; consistently.
if you are using external CSS file then use this code in the <style> tag. Make sure when you using <style> tag place it in the <head> section.
you can also use this code to <div> tag or <section> tag. if there is some problem to display image then add width and height property. This property will provide exact height and width of the background. if you getting any problem then go to this youtube link. we will provide the video tutorial to understand more comfortably.
if you have any question then comment us in the comment.