Experiencing some difficulties with Bootstrap and creating a resizable column background.
In one row, there is a column with a fluid image at the top, another column below it with a CSS class that gives it a repeating background along the Y axis, and finally a column at the bottom with another fluid image.
The concept is to have the top and bottom images serve as the ends of a box, while the background image in the center repeats along the Y axis to create the illusion of a closed box regardless of content length.
However, despite various attempts, the center box's background image always appears misaligned and overflows slightly (refer to the linked image). Can anyone offer assistance in aligning this properly?
https://i.sstatic.net/6qjye.jpg
Here is the code being used:
HTML
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-12 order-2">
<img class="img-fluid" src="img/games/crabs/framework/box-top.png" alt="What is Crabs">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-12 order-3 crabs-textbox-centre">
<h1 class="text-center">
<span class="text-danger strong">
CRABS is an arena based, multiplayer, party brawler extravaganza!
</span>
<br>
</h1>
<h2 class="text-center">
Battle friends or AI across a range of unique and exciting game modes in competitive and co-op local couch play.
</h2>
<h2 class="text-center">
Current and next-gen platforms.
</h2>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-12 order-4">
<img class="img-fluid" src="img/games/crabs/framework/box-bottom.png" alt="What is Crabs">
</div>
</div>
CSS
.crabs-textbox-centre
padding: 0 40px 0 40px;
background-image: url("../img/games/crabs/framework/box-centre.png");
height: auto;
background-repeat: repeat-y;
background-size: 100%;
background-position: center center;