Bootstrap 2 columns right column covering background image

Question

I am building a website and I use bootstrap. I have 2 columns in the left one I have some text with a pattern as background and in the right one I want a background-image covering the entire column.

For some reason my background image is not showing. I've tried some things but the image never covers the entire column

here's a codepen demo to demonstrate

Answer 1

Your issue is not related to the background image itself, it related to the height of the right column it's height is just 1px because Boostrap by default give each column min-height:1px; when it doesn't have any contents

So you have to give it some content or height of 426px like the left column

Now you have many options to fix this

Option 1

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

See the new CODEPEN you should find it like Note you have a wrong selector in CSS you had used nopadding it should be .nopadding

option 2

it not good idea but it will solve it

You can add the same content to the column on the right but give it opacity:0;