Html Div引导背景位置

我对这个布局有问题。我想在这些框的正中央放置一个应用程序的图片。对于包含文本的部分，图像在背景的顶部和底部可见是很重要的。我尝试了所有的东西，既可以作为背景，也可以作为普通图像（位置、z索引等）。 我对col和row使用引导。我也需要这个在手机上看起来很漂亮。我需要设计来查看附加图片，但在中间的图片在前面的背景。有什么建议吗

当前代码和CSS：

<center> 
<div class="margin50">
<section class="appfeatures section-spacing">
<div class="container_appfeatures">
<div class="row">
    <div class="col-md-3 text-right"><h3 class="white">Headline</h3><br />text text text text text text text text text text text text text text text text text text </div>
    <div class="col-md-1 text-left"><img class="appicon_white" src="img/createtip_white.png" alt="Opret Tip Ikon"></div>
    <div class="col-md-offset-4 col-md-1 text-right"><img class="appicon_white" src="img/rank_white.png" alt="Rank List Ikon"></div>
    <div class="col-md-3 text-left"><h3 class="white">Headline</h3><br />text text text text text text text text text text text text text text text text text text </div>
    <div class="col-md-3 text-right"><h3 class="white">Headline</h3><br />text text text text text text text text text text text text text text text text text text </div>
    <div class="col-md-1 text-left"><img class="appicon_white" src="img/feed_white.png" alt="Live Score Ikon"></div>
    <div class="col-md-offset-4 col-md-1  text-right"><img class="appicon_white" src="img/profile_white.png" alt="Eksperter Ikon"></div>
    <div class="col-md-3 text-left"><h3 class="white">Headline</h3><br />text text text text text text text text text text text text text text text text text text </div>

</div>
</div>
</section>
</div>
</center>


.appicon_white {
width: 60px;
height: 60px;
    }

.appfeatures {

background: rgb(102,204,153);
background: linear-gradient(180deg, rgba(102,204,153,1) 0%, rgba(30,130,76,1) 100%);
opacity: 0.5;
}


.container_appfeatures {
width: 80%;

}



.margin50 {
margin-top: 75px;
margin-bottom: 75px;
width:100%; 
height:100%;
background-image: url("../img/profile.png");
background-repeat: no-repeat;
background-position: center center;
padding-top:95px;
padding-bottom:95px;
}

标题文本文本文本
标题文本文本文本
标题文本文本文本
标题文本文本文本
.appicon_white{
宽度：60px；
高度：60px；
}
.appfeatures{
背景：rgb（102204153）；
背景：线性梯度（180度，rgba（102204153,1）0%，rgba（30130,76,1）100%）；
不透明度：0.5；
}
.container\u应用程序功能{
宽度：80%；
}
玛金先生50{
边缘顶部：75px；
边缘底部：75px；
宽度：100%；
身高：100%；
背景图片：url（“../img/profile.png”）；
背景重复：无重复；
背景位置：中心；
填充顶部：95px；
填充底部：95px；
}

不要使用

col-md-offset-4

只使用

col-md-4

，您必须在每一行中使用

。在这里，我更新了您的html代码：

<center>
    <div class="margin50">
        <section class="appfeatures section-spacing">
            <div class="container_appfeatures">
                <div class="row">
                    <div class="col-md-3 col-sm-3 text-right">
                        <h3 class="white">Headline</h3>
                        <br />text text text text text text text text text text text text text text text text text text 
                    </div>
                    <div class="col-md-1 col-sm-1 text-center">
                        <img class="appicon_white" src="img/createtip_white.png" alt="Opret Tip Ikon">
                    </div>
                    <div class="col-md-4"> </div>
                    <div class="col-md-1 col-sm-1 text-center">
                        <img class="appicon_white" src="img/rank_white.png" alt="Rank List Ikon">
                    </div>
                    <div class="col-md-3 col-sm-3 text-left">
                        <h3 class="white">Headline</h3>
                        <br />text text text text text text text text text text text text text text text text text text 
                    </div>
                </div>
                <img src="https://path to your iphone image">
                <div class="row">
                    <div class="col-md-3 col-sm-3 text-right">
                        <h3 class="white">Headline</h3>
                        <br />text text text text text text text text text text text text text text text text text text 
                    </div>
                    <div class="col-md-1 col-sm-1 text-center">
                        <img class="appicon_white" src="img/feed_white.png" alt="Live Score Ikon">
                    </div>
                    <div class="col-md-4"> </div>
                    <div class="col-md-1 col-sm-1 text-center">
                        <img class="appicon_white" src="img/profile_white.png" alt="Eksperter Ikon">
                    </div>
                    <div class="col-md-3 col-sm-3 text-left">
                        <h3 class="white">Headline</h3>
                        <br />text text text text text text text text text text text text text text text text text text 
                    </div>
                </div>
            </div>
        </section>
    </div>
</center> 

Jsfiddle：

然后在您的移动/小型视图中，只需在媒体查询中添加以下内容：

.col-md-3 {
    text-align:left;
    font-size: 10px; /*just adjust this to your desired size*/
}

.col-md-1,
.margin50 {
    display:none; /*this is just optional if you just want hide icons on mobile view. Much better if you will hide the phone image on mobile view for sleek and clean layout.*/
}

.your-other-styles {
    /*add your other styles here*/
}

---

双击

。行

不是引导的方式。没有看到，是的，你是对的，我只是编辑上面的代码。谢谢谢谢，但是我在将图片置于背景色之前时仍然遇到问题。你对此有什么建议？@htobiassen请看我上面更新的代码，并检查一下这把小提琴：告诉我是否正确。谢谢。嗨，马克，谢谢你的回答。我已经尝试过更新过的代码，但是现在图片在页面的中间。而不是在div/章节的中间。我认为问题是，还有其他内容的网页和解决方案，你发送将只工作，如果这是唯一的contant在网页上。即使页面上有其他内容，你知道怎么把它放在部分的中间吗？

.col-md-3 {
    text-align:left;
    font-size: 10px; /*just adjust this to your desired size*/
}

.col-md-1,
.margin50 {
    display:none; /*this is just optional if you just want hide icons on mobile view. Much better if you will hide the phone image on mobile view for sleek and clean layout.*/
}

.your-other-styles {
    /*add your other styles here*/
}