Bootstrap 4 卡片是否可以平铺背景图像

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"><a href="#">xxxDescriptionxxx</a></h3>
      <p>
        <a href="#"><img src="images/xxxImagexxx.jpg" alt="xxxDescriptionxxx" height="100" width="80" style="margin-right: 10px;float: left" /></a>
        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"><a href="#">xxxDescriptionxxx</a></h3> <p> <a href="#"><img src="http://www.rocksquad.co.uk/images/backcard-brushedmetal.jpg" alt="xxxDescriptionxxx" height="100" width="80" style="margin-right: 10px;" /></a> 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"><a href="#">xxxDescriptionxxx</a></h3> <p> <a href="#"><img src="http://www.rocksquad.co.uk/images/backcard-brushedmetal.jpg" alt="xxxDescriptionxxx" height="100" width="80" style="margin-right: 10px;" /></a> 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"><a href="#">xxxDescriptionxxx</a></h3>
      <p>
        <a href="#"><img src="images/xxxImagexxx.jpg" alt="xxxDescriptionxxx" height="100" width="80" style="margin-right: 10px;float: left" /></a>
        xxxSomeTextHerexxx
      </p>
    </div>
  </div>
</div>