html - Looking for a way to create a web layout with overlapping text -

i'm trying build following layout:

a background color left half of screen, image right half of screen , overlapping text:

i'm using drupal bootstrap based theme.

i've tried building setting image background image size 50% 100% , position:right doesn't maintain image proportions.
i've tried putting text in col-6 , image in col-6, works when apply display:-moz-box, position:relative , z-index:999 text, feels hacky , don't know if that's right approach.

is possible build layout text overlapping background-color , background-image using bootstrap nesting example?

thanks!

first, should separate page in 2 bootstrap grid

<div class="header row">   <div class="header__left col-sm-6">     <h1>shinny homepage</h1>   </div>   <div class="header__right col-sm-6"></div> </div> 

second, have make sure 2 columns keeps same height. example, add rule set header height screen height.

.header {   height: 100vh; } .header__left, .header__right {   height: 100%; } 

third, add background cover size right cell

.header__right {   background-image: url();   background-size: cover; } 

see live example here: http://codepen.io/tzi/pen/jwkodn