Can Bootstrap 4 Cards Have Tiled Background Images

user_11474450 0
Viewed 2657

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

bootstrap-4 tiles background-image html
1 Answers

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>
user_65250810
Related