Can Bootstrap 4 Cards Have Tiled Background Images - html

Question

I am trying to get a card to have a tiled background image. To get a single image background I use:
<div class="card img-fluid">
<img class="card-img-top" src="images/backcard-brushedmetal.jpg">
<div class="card-img-overlay">
<div class="card-body text-justify">
<h3 class="articleh3">xxxDescriptionxxx</h3>
<p>
<img src="images/xxxImagexxx.jpg" alt="xxxDescriptionxxx" height="100" width="80" style="margin-right: 10px;float: left" />
xxxSomeTextHerexxx
</p>
</div>
</div>
</div>
My problem is that I use cards of different sizes and right now my image size is governing the size of my card; I guess I want it the other way round (the card to govern the size of the displayed background). So I wondered if it was possible to tile a background image so it just fills the background and then it shouldn't matter what size the card or image is.
For all I know, this may not even be possible and if not, that's fine, I'll look for another way to do something like :)
Anyway, thanks for any advice :)
James

Answer 1

If the only purpose of using img element is as a background - use background-image CSS property which sets background image on an element.
Edit per comments:
Obviously the float part cause some "problems" on the given markup, BUT there is something more out there... Can't figure myself why this not working - so i remove BS4 (added 2 examples):
.card.img-fluid {
background: url(http://www.rocksquad.co.uk/images/backcard-brushedmetal.jpg) no-repeat;
background-position: center;
background-size: cover;
}
<div class="card img-fluid">
<div class="card-img-overlay">
<div class="card-body text-justify">
<h3 class="articleh3">xxxDescriptionxxx</h3>
<p>
<img src="http://www.rocksquad.co.uk/images/backcard-brushedmetal.jpg" alt="xxxDescriptionxxx" height="100" width="80" style="margin-right: 10px;" />
xxxSomeTextHerexxx<br>xxxSomeTextHerexxx
</p>
</div>
</div>
</div>
<hr>
<div class="card img-fluid">
<div class="card-img-overlay">
<div class="card-body text-justify">
<h3 class="articleh3">xxxDescriptionxxx</h3>
<p>
<img src="http://www.rocksquad.co.uk/images/backcard-brushedmetal.jpg" alt="xxxDescriptionxxx" height="100" width="80" style="margin-right: 10px;" />
xxxSomeTextHerexxx<br>xxxSomeTextHerexxx<br> xxxSomeTextHerexxx<br>xxxSomeTextHerexxx<br> xxxSomeTextHerexxx<br>xxxSomeTextHerexxx<br> xxxSomeTextHerexxx<br>
</p>
</div>
</div>
</div>
This question need some "bootstrap 4 expert" to answer on - clearly this is not me (:
Old (not working) answer:
In your case, since you want the image would cover the element, you can do something like that:
<style>
.card.img-fluid {
background: url(images/backcard-brushedmetal.jpg) no-repeat;
background-position: center;
background-size: cover;
}
</style>
<div class="card img-fluid">
<div class="card-img-overlay">
<div class="card-body text-justify">
<h3 class="articleh3">xxxDescriptionxxx</h3>
<p>
<img src="images/xxxImagexxx.jpg" alt="xxxDescriptionxxx" height="100" width="80" style="margin-right: 10px;float: left" />
xxxSomeTextHerexxx
</p>
</div>
</div>
</div>