Bootstrap 4: How to Include a Background Image Without Css
Bootstrap Defines Css Classes to Cover Most Common Website Design Elements, but I Can't Figure out How to Specify a Background Image File Using Bootstrap...
Bootstrap defines CSS classes to cover most common website design elements, but I can't figure out how to specify a background image file using Bootstrap classes without adding clunky customized CSS.
1 Answer
You will have to give background-image:url(''); property using style to give the path of the image and you can make the image responsive using .bg-image class.
Here's how you can do that:
Add background-image via inline CSS.
Add .bg-image class to scale the image properly and to enable responsiveness.
Example:
<div class="bg-image"
style="background-image: url(');
height: 100vh">
</div>
vh stands for viewport height.
Here the height:100vh means 100% of the available height.
Sarah Jenkins is a veteran tech journalist with over 12 years of experience covering artificial intelligence, mobile innovations, and digital ethics. Her insights have appeared in leading technology publications worldwide.
