-1

I'm trying to build the following layout:

a background color for the left half of the screen, an image for the right half of the screen and overlapping text: enter image description here

I'm using Drupal with a bootstrap based theme.

I've tried building this by setting the image as a background image with size 50% 100% and position:right but that doesn't maintain the image proportions.
I've also tried putting the text in a col-6 and the image in a col-6, which works when I apply display:-moz-box, position:relative and z-index:999 to the text, but it feels hacky and I don't know if that's the right approach.

Is it possible to build a layout like this with text overlapping the background-color and the background-image by using bootstrap nesting for example?

Thanks!

Walnoot
  • 3
  • 4

1 Answers1

0

First, you should separate the page in two with the 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, you have to make sure that this 2 columns keeps the same height. For example, you add a rule to set the header height to the screen height.

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

Third, you add a background with cover size to the right cell

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

See a live example here: http://codepen.io/tzi/pen/jWKOdN

tzi
  • 8,719
  • 2
  • 25
  • 45
  • That works like a charm! Do you have a suggestion on how to let the text from the left column also reach and overlap the right column? I'd like to get the '2016' from my example image to go over the image in the right column. Thanks! – Walnoot Jan 29 '16 at 14:14
  • I would do it this way: http://codepen.io/tzi/pen/XXYmmr I can update my answer if you want to ;) – tzi Jan 29 '16 at 15:31
  • This is exactly what I meant, and I think that's a really clever way to go about it. Thanks so much!! – Walnoot Jan 29 '16 at 19:02