Html 引导2列右列覆盖背景图像

我正在建立一个网站，我使用引导。 我在左边有两列，我有一些文本，背景是图案，在右边我想要一个

背景图像

覆盖整个列

由于某种原因，我的背景图像没有显示。我试过一些方法，但图片从未覆盖整个专栏

---

这里有一个例子来说明

你的问题与背景图像本身无关，它与右栏的高度有关。它的高度只是

1px

，因为Boostrap默认为每栏

最小高度：1px当它没有任何内容时

因此，您必须给它一些内容或高度
426px
，如左列所示

现在您有许多选项来修复此问题

选项1

使用jQuery：

function adjusting_height(){
  var height = $('.has-content').css('height');
  $('.has-image div').css('height',height);
}
$(document).ready(function(){
  adjusting_height();
$(window).resize(function(){
  adjusting_height();
})

});

HTML

看到新的你会发现它像
注意
您在CSS中使用了一个错误的选择器
nopadding
它应该是
。nopadding

选项2

这不是个好主意，但会解决的

您可以将相同的内容添加到右侧的列中，但不透明度为
opacity:0
你好，弗兰克，你能发布你的HTML/CSS代码来帮助我们解决这个问题吗，谢谢@PeterWilson我做了，你可以在OP中使用密码链接，提前感谢如果我给它一个固定的高度，它还会有响应吗？它会在所有设备上扩展吗？@FrankLucas不会，因为在小屏幕上，内容会占据更多的高度：（那么我该如何解决这个问题呢？我尝试过使用height:auto，但似乎不起作用。基本上，您只添加了has image类和javascript？这似乎无法解决我的问题，unfortunately@FrankLucas似乎您没有检查新的codepen和jquery代码以及对CSS所做的编辑：（，请再次阅读答案并检查密码笔
<div class="container-full">
  <div class="row">
    <div class="has-content text-center col-md-6 nopadding">
      <div class="block give-me-a-pattern-please-thanks">
        <h2>title</h2>
        <hr>
        <p>Hello there, I am a paragraph text. It's nice to meet you! Unfortunately I am here only temporarily, but hey don't be sad! I am sure we'll meet again soon. Oh yeah before you move on don't forget the check me out on mobile devices I look awesome
      there as well.</p>
     </div>
   </div>
<div class="has-image text-center col-md-6 nopadding">
  <div style="background-image: url(http://s1.picswalls.com/wallpapers/2014/12/09/butterfly-wallpaper_093549561_256.jpeg);"></div>
</div>

.container-full{
margin: 0 5%;
background-color:rgba(0,0,0,1);
}
.block{
padding: 100px;
color: #666;
}

.block hr{
margin-top: 40px !important;
margin-bottom: 40px !important;
border-top: 3px solid aqua !important;
width: 15% !important;
}

.nopadding {
padding: 0 !important;
margin: 0 !important;
}

.give-me-a-pattern-please-thanks{
background-image: url("http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/new_year_background.png") !important;
background-size: cover;
}