Add background image in Bootstrap row
When you want to add a background image, <img>
is not the way to go. Use the background-image
property.
<header>
<div class="container">
<div class="row"
style="background:transparent url('img/profile.png') no-repeat center center /cover">
<div class="col-lg-12">
<div class="intro-text">
<span class="name">HEADING</span>
<hr class="star-light">
<span class="skills">TEXT</span>
</div>
</div>
</div>
</div>
</header>
Please note that adding inline style is not recommended, I used it demonstrative here. The proper way to style your div would be to add a specific class or an ID to it and style it inside your CSS files.
In the snippet above I used the background
shorthand property to set the background-image
. This shorthand allows setting background color
, image
, repeat
, origin
, clip
, position
and size
in a single declaration. You can skip any of them, but size
must be prefixed with a /
and come right after position
.