为bootstrap中的列创建可缩放的重复背景

Question

我在bootstrap和创建一个可伸缩的列背景方面遇到了一些问题。

在单行中，我有一个带有流体图像的列(框的顶部)，下面有一列，这列有一个CSS类，使它在Y轴上有一个重复的背景，最后有一列下面有另一个流体图像(框的底部)。

所以想法是这两个图像是盒子的顶部和底部，然后中心背景图像将沿着Y方向重复，并与两个图像完美地对齐，使其看起来像一个封闭的盒子，无论内容的长度如何。

然而，无论我怎么尝试，中间框的背景图像总是不对齐，所以它会有点失血(见下图)。有人能帮我把这个整理一下吗？

​

​

我使用了以下代码：

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;

Answer 1

感谢你对胖子的评论...我已经使用以下设置修复了这个问题：

我创建了两个新的CSS样式项目，每个项目的顶部和底部都有自己的背景，然后我只需在上面添加这些列。

任何特定于移动设备的大小都是通过媒体查询完成的，请参阅以下代码：

HTML

<div class="row">
            <div class="col-lg-12 col-md-12 col-sm-12 col-12 order-1 crabs-textbox-top">
            </div>

            <div class="col-lg-12 col-md-12 col-sm-12 col-12 order-2 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-3 crabs-textbox-bottom">
            </div>

        </div>

CSS

.crabs-textbox-top{
    margin: 20px 0 0 0;
    height: 64px;
    background-image: url("../img/games/crabs/framework/box-top.png");
    background-repeat: no-repeat;
    background-size: 95%;
    background-position: bottom center;
}

.crabs-textbox-centre{
    padding: 0 60px 0 60px;
    height: auto;
    background-image: url("../img/games/crabs/framework/box-centre.png");
    background-repeat: repeat-y;
    background-size: 95%;
    background-position: center center;
}

.crabs-textbox-bottom{
    margin: 0 0 20px 0;
    height: 64px;
    background-image: url("../img/games/crabs/framework/box-bottom.png");
    background-repeat: no-repeat;
    background-size: 95%;
    background-position: top center;
}

@media screen and (max-width: 767px) {

.crabs-textbox-top{
    margin: 10px 0 0 0;
    height: 30px;
    }

.crabs-textbox-bottom{
    margin: 0 0 10px 0;
    height: 30px;
    }
    
}