Set DIV to size of background-image - html

Question

So I am trying to figure out, how I can set the size of the second Box (see screenshot) to the size of the background image. I am using bootstrap and it's build flex classes. Maybe you guys can help me out here.
Essentially what I would like to have is the purple box to be the same size of the background image and keep being the same size on resizing the screen.
To test things out, I provided a prepared Stackblitz environment: https://stackblitz.com/edit/javascript-rs3ykl?file=index.html
.page-container {
width: 100vw;
height: 50vh;
}
.background-image {
background: url('https://dummyimage.com/258x362/007aa5?text=Banner-Desktop-Large') center center / contain no-repeat;
height: 100%;
width: auto;
background-origin: content-box;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="page-container">
<div class="row w-100 h-100">
<div class="col-4 bg-primary">
<p>Box 1</p>
</div>
<div class="col-4">
<div class="background-image">
<div style="background: purple">
<div class="d-flex justify-content-around" style="color: rgb(255, 255, 255)">
<div class="d-flex flex-column">
<div>Tage</div>
<div>16086</div>
</div>
<div class="d-flex flex-column">
<div>Stunden</div>
<div class="">6</div>
</div>
<div class="d-flex flex-column">
<div>Minuten</div>
<div>13</div>
</div>
<div class="d-flex flex-column">
<div>Sekunden</div>
<div>34</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-4 bg-secondary">
<p>Box 3</p>
</div>
</div>
</div>

Answer 1

I think it's better to use image tag instead of url with div. so I changed it like this
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<style>
.page-container {
width: 100vw;
height: 50vh;
}
.background-image {
height: 100%;
width: auto;
background-origin: content-box;
}
.bk-image {
object-fit: cover;
width: 100%;
height: 100%;
}
</style>
<div class="page-container">
<div class="row w-100 h-100">
<div class="col-4 bg-primary"><p>Box 1</p></div>
<div class="col-4">
<div class="background-image">
<div style="background: purple">
<div class="d-flex justify-content-around" style="color: rgb(255, 255, 255)">
<div class="d-flex flex-column">
<div>Tage</div>
<div>16086</div>
</div>
<div class="d-flex flex-column">
<div>Stunden</div>
<div class="">6</div>
</div>
<div class="d-flex flex-column">
<div>Minuten</div>
<div>13</div>
</div>
<div class="d-flex flex-column">
<div>Sekunden</div>
<div>34</div>
</div>
</div>
</div>
<img class="bk-image" src = "https://dummyimage.com/258x362/007aa5?text=Banner-Desktop-Large">
</div>
</div>
<div class="col-4 bg-secondary"><p>Box 3</p></div>
</div>
</div>
and now the purple bar stays with the background picture, also since you used height 100% I did it too but if you want it to stay inline with the row you can set the height as the same as row height.