如何使我的背景图像响应？

Question

.bg {
    width: 800px;
    height: 600px;
    position: absolute;
    background-image: url('../images/bg.jpg');
    text-align: -webkit-center;
    position: relative;
}
.title {
    text-align: center;
    top: 15px;
}
.body {
    width: 560px;
    position: absolute;
    top: 215px;
    left: 120px;
    height: 207px;
    background-image: url('../images/bord.png');
    background-repeat: no-repeat;
   background-position: center;
}

<div>
    <div class="bg" class="img-fluid">
        <div id="mainContent" style="opacity: 0.0;">
            <div id="title" class="title">
                <div class="img-fluid"><img src="assets/images/title.png"></div>
                <div class="img-fluid"> <img src="assets/images/correct.png" id="image" class="right" draggable="false"></div>
                <div> <img src="assets/images/bord.png" class="right2"></div>
                <div id="board" class="body">
                    <div id="questionDiv">
                        <img id="question" src="assets/images/q1.png" draggable="false" style="margin: 0px;">
                    </div>
                    <div id="optionDiv" class="optionDiv">
                        <input type="image" id="a1" draggable="false" src="assets/images/1.png" onclick="checkAnswer(1);" style="padding-right:40px;">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>  

我在使页面响应时遇到问题，这是使图像响应的正确方法吗？尤其是我的背景没有响应，如果我更改背景的CSS，那么整个页面都会变得混乱，请参阅我的代码

我尝试将背景高度和宽度设置为100％，然后将其设置为自动 background-position: 100% 100%

即使我以某种方式使背景响应..所有图像都变得不安