Html 如何在Bulma CSS中内联放置背景图像和文本？

我正在创建一个公文包页面。我用的是Bulma。我想要的是将背景图像和文本内联放置

代码如下：

<section class="hero is-halfheight upload-descr" style = "height: 37em">
        <div class="hero-body">     
            <div class="container">
                <div class="clearfix"></div>
                <hr class = "rm-descr-bar" style = "float: left;"></hr>
                <div class="clearfix"></div>
                <h1 class = "title">
                    Loren Ipsum
                </h1>
                <div class="content rm-has-medium-size">
                    <p class = "upload-descr-exp" aria-live = "polite" aria-atomic = "true">Lorem ipsum dolor sit amet, consectetur adipiscing<br />elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />Ut enim ad minim veniam, quis nostrud exercitation<br />ullamco laboris nisi ut aliquip ex ea<br />ea commodo consequat. Duis aute irure dolor.</p>
                </div>
            </div>
        </div>
</section>

洛伦同侧
Lorem ipsum door sit amet，concertetur adivising
Elite，在劳工和大股东的临时合同中执行。
。两个人在一起

我想要的是背景图像在

中向右移动。但是它会被裁剪。我把容器的高度和宽度弄糟了。这会影响容器内的文本，即不再垂直居中。请帮忙

我想做到这一点：

我试过：

<section class="hero is-halfheight upload-descr section" style = "height: 37em">
        <div class="hero-body container" style = "background: url('/img/pic.png') no-repeat right; background-size: contain;">     
            <div class="container">
                <div class="clearfix"></div>
                <hr class = "rm-descr-bar" style = "float: left;"></hr>
                <div class="clearfix"></div>
                <h1 class = "title">
                    Loren Ipsum
                </h1>
                <div class="content rm-has-medium-size">
                    <p class = "upload-descr-exp" aria-live = "polite" aria-atomic = "true">Lorem ipsum dolor sit amet, consectetur adipiscing<br />elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br />Ut enim ad minim veniam, quis nostrud exercitation<br />ullamco laboris nisi ut aliquip ex ea<br />ea commodo consequat. Duis aute irure dolor.</p>
                </div>
            </div>
        </div>
</section>

洛伦同侧
Lorem ipsum door sit amet，concertetur adivising
Elite，在劳工和大股东的临时合同中执行。
。两个人在一起

在尝试了上面的代码之后，我实现了我想要的东西。然而，在减小视口大小时，背景图像和文本会显示在另一个视口的上方，可能它们是垂直和水平居中的。请帮帮我。如何将背景图像和文本放置在一起而不出现任何错误

以下是错误：

---

按照我的想法，您使用了两次容器类，这就是为什么会出现此错误。是否要将背景颜色更改为红色和img

意念

• 左侧文本和右侧图像
• 提供所有相同的背景色

例子 （图像比例约为4:3。根据需要更改CSS。）

.mySection{
背景色：#F93122；
颜色：白色；
边框：1px纯白；
}
我的英雄{
填充：50px 0 50px 75px；
}
.myHero.hr{
显示：内联块；
宽度：100px；
高度：15px；
背景：白色；
边界半径：20px；
边缘底部：15px；
}
.myHero h1{
字体大小：50px
}
@介质（最大宽度：768px）{
我的英雄{
填充：50px！重要；
}
}

洛伦同侧
Lorem ipsum dolor sit amet，奉献精英。格言和同一性在快速眼动减去nihil、BLANDITIS nisi、quidem TIME quos qui qui qui quas qui qui qui qui qui qui qui qui qui qui qui qui qui qui qui qui qui qui qui qui qui qui qui qui qui QU。布兰迪提斯是一个酒鬼吗？布兰迪提斯

为什么不将包含背景图像的div容器和包含文本部分的div容器作为同级容器分开？通过这种方式，您可以使用显示：flex on section，它们不会重叠，并且将在视口的所有分辨率下并排对齐。没有删除它，请尝试背景大小：cover；你想要整页吗？不需要@Liamm12。可能是37em div。你想要这样的背景吗，我可以根据你的需要更改文本