Bootstrap 2列右列覆蓋背景圖像

Question

我正在建設一個網站，我使用引導程序。 我在左邊有2列我有一些文字，圖案作爲背景，在右邊我想要一個覆蓋整個列的background-image。

出於某種原因，我的背景圖片未顯示。我已經嘗試了一些東西，但像從來沒有覆蓋整個列

這裏有一個codepen demo來證明它的高度是

Answer 1

您的問題不相關的背景圖像本身，它涉及到右列的高度只是因爲1px自舉默認情況下，給每列min-height: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

<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> 

CSS

.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; 
} 

看到新CODEPEN你會發現它像 注意 你有一個錯誤的選擇在CSS您用過nopadding應該.nopadding

選項2

它不好主意，但它會解決它

您可以廣告d相同的內容到右邊的列，但給它opacity:0;

Answer 2

你好，我已在你的東西的變化......

HTML

<div class="container-full"> 
    <div class="row"> 
    <div class="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="text-center col-md-6"> 
     <div class="im" style="background-image: url(http://s1.picswalls.com/wallpapers/2014/12/09/butterfly-wallpaper_093549561_256.jpeg);width: 600px; height:700px;"> 
     </div> 
    </div> 
</div> 

CSS

.container-full{ 
     //margin: 0 5%; 
     //background-color:rgba(0,0,0,1); 
    } 
    .im { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-repeat: no-repeat; 
    background-size: contain; 
} 

    .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; 

    } 

現在圖像顯示在您div的背景中。

希望你能滿足這個解決方案。