Add a Responsive Container over a Background Image

Hi,

I have content that I only want to appear in the first nine columns using a Bootstrap Grid, which is all fine and no problem see 'Example 1' in the JSFiddle, however, I want to maintain the same behaviour when the same container is 'floated' over a background image, see 'Example 2', but as soon as I introduce a background image, the floated content gets squashed into what looks like a couple of columns and I can't figure out how to change this.

What am I doing wrong or is this simply not possible to achieve?

JSFiddle

Many thanks

If you remove display:flex; from #stage it will no longer squish the grid. But if you need that in there I'll look further in trying to figure out how to not have that happen. But it currently is the cause, not the background image.

Saj

Leaving display:flex; also then add the following CSS will un-squish the grid container and it will line back up like in example one. If you were wanting it to be both vertical and horizontally center adding justify-content:center to #stage is supposed to do that, not sure why it's not yet.

#stage .container{
  flex:1;
}

Saj

Ok, so I did this in the app to work on it. It worked in the app and in preview. It worked in Chrome/FF/Edge/IE11 for IE10 you would have to include the -ms version of flexbox rules.

Here is the HTML I used

<div id="stage">
    <div class="container">
        <div class="row flex-row">
            <div class="col-xs-9 red">< span>col-xs-9 < /span>
                <div class="row">
                    <div class="col-xs-6 green">< span>col-xs-6 < /span></div>
                    <div class="col-xs-6 blue">< span>col-xs-6 < /span></div>
                </div>
            </div>
        </div>
    </div>
</div>

Here is the CSS I used

#stage{
  display:flex;
  width:100%;
  height:100px;
  background:url(/placeholder-img.png) center center no-repeat;
  background-size:cover;
  color:#fff;
  align-items:center;
  justify-content:center;
}

.red{
  background-color:red;
}

.green{
  background-color:#9fbe00;
}

.blue{
  background-color:#53a7ea;
}

.flex-row{
  display:flex;
  justify-content:center;
}

I worked under the assumption that you wanted the content to be horizontally aligned center as well.

I just added the justify-content:center to #stage and added class "flex-row" to the first .row after the container and used the CSS display:flex;justify-content:center;

I think that solves your issue, at least it seems to have anyways :)

Saj

Hi Saj,

Many thanks for your replies to my problem... Yes, you are right, I wanted the content to be horizontally (and vertically) aligned and centered as well within the first nine columns. I actually found your second solution worked perfectly. As soon as I added the css you suggested, everything worked as expected. It wouldn't have occurred to me to add this in a million years...

    #stage .container {
         flex: 1; 
    }

Many thanks for taking the time to help me with this, it is very much appreciated.