<div class="card d-inline-block container-flex" style="border: 3px solid #f95; background-color: #333; background-image:url('https://i.imgur.com/qE7h0c1.png'); height:400px; background-position: center;">
<div class="card-block align-content-center w-100">
<div class="col-md-5 offset-md-5 text-white p-3" style="text-shadow: 2px 2px #000000; height: 350px; overflow: auto; background-color:rgba(0,0,0,.4); border-radius: 25px">
<p class="font-weight-bold">This uses a very large image with a height of 400px. This particular one is 1600px wide and a specially-compressed png to use less bandwidth! You could arguably put a repeating background on it, too, just like the below example. The text is bold, white with a black shadow. I would recommend this for darker images or background colors. This is mobile-responsive and will add a scroll-bar if the text is at least 350px high.</p>
<p class="font-weight-bold">Please don't steal others' art for this. I left a little space at the bottom for displayed source, so if you're using screenshots from something, or art someone made for you, please leave the source displayed! If you'd like free-range sources, try pixabay, unsplash, pexels, or gratisography! (While they don't require credits, it's sure nice to share.)</p>
<p class="font-weight-bold">Feel free to change the #f95 (border) and #333 (background) to colors that go well with your image!
<p class="text-right font-weight-light">bg by <a href="https://unsplash.com/@grakozy">grakozy</a></p>
</div>
</div>
</div>
<div class="card card-block p-2 m-2 text-center" style="border: 3px solid #e10662;">
<p>two examples of the same block but different colors!!! please use one at a time, probably!!!!</p>
</div>
<div class="card d-inline-block container-flex" style="border: 3px solid #fdf; background-color: #bcd; background-image:url('https://78.media.tumblr.com/3d36c210cb16211038aba3b3ff059ad2/tumblr_o8fs79QQea1sj17gio5_540.png'); height:400px; background-position: center;">
<div class="card-block align-content-center w-100">
<div class="col-md-5 offset-md-5 p-3" style="color:#000; text-shadow: 2px 2px #fff; height: 350px; overflow: auto; background-color:rgba(255,255,255,.4); border-radius: 25px">
<p class="font-weight-bold">This one uses a repeating tile image. You could put a static image on this one too, just like the above example. The text is bold, black with a white shadow. I would recommend this for lighter images or background colors. This is mobile-responsive and will add a scroll-bar if the text is at least 350px high.</p>
<p class="font-weight-bold">This background is a repeating tile from https://www.transparenttextures.com/ ! Please don't steal others' art for this. Please leave your copyrights in, they're not bolded and shouldn't be too distracting, but it is important.
<p class="font-weight-bold">Feel free to change the #fdf (border) and #bcd (background) to colors that go well with your image!
<p class="text-right font-weight-light">bg (c) transparenttextures.com</p>
</div>
</div>
</div>