Background image for card view isn't displaying

Question

I want to display card views in my web page. The card view should have a background image, and below that there should be the Card title, and again below that there should be some short texts.

Here's how I have tried the code,

<h1>ViewAllVehicles</h1>

<div class="card-columns">
@foreach (var item in Model)
    {
    <div class="card">
        <div class="card-img" style="background-image: url('@("~/VehicleImages/"+item.vehicleImageName)')"></div>

        <div class="card-body">
            <h5 class="card-title">@item.vehicleType</h5>
        </div>

        @item.vehicleAvailability
        @item.plateNumber

    </div>
    }
</div>


Currently this is the result I get, 
[![enter image description here][1]][1]


  [1]: https://i.stack.imgur.com/O6P3L.jpg

Answer 1

It's not exactly clear which solution you want so I will provide both from the bootstrap docs. The first one is for a background image with an overlay:

<div class="card">
  <img class="card-img" src="..." alt="Card image">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">....stuff</p>
    <p class="card-text">...more stuff</p>
  </div>
</div>

Or second option: image with text below it:

<div class="card">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">...stuff</p>
  </div>
</div>

As you can see, your first problem is that you are missing an img tag for you background image. Now that I re-read your question, my guess is that you want option 2.

Answer 2

Background image for card view isn't displaying

Please try to use @Url.Content("~/VehicleImages/"+item.vehicleImageName), as below.

<div class="card-img" style="background-image: url('@Url.Content("~/VehicleImages/"+item.vehicleImageName)')"></div>

And please check if you put image files within correct folder, like below.

Test Result