Bootstrap row background image becomes wider than parent grid width

0
votes

I am using bootstrap, I wanted one div behind the other div, so used z-index en position: absolute and relative.

When doing this, every div under the div with z-index: 1 goes behind this div, while I want it to stay under it.

The div also becomes wider than the max-width when using 100%

<div class="row" id="MENUROW">
    <div class="col-md-12" id="MENUCOLUMN"><h1>SHOP</h1></div>
</div>
<div class="row" id="MAINROW"> <!-- this has the background-image -->
    <div class="col-md-12" id="MAINCOLUMN">
    </div>
</div>

CSS:

#MENUROW

    {
    position: relative;
    height: 80px;
    background-color: transparent;
    z-index: 2;
    }

#MAINROW 

    {
    position: absolute;
    z-index: 1;
    top: 60px; /*because there is 1 div above the menu div, this div needs to be just under that div, behind the menu div */
    width: 100%;
    background-image: url(../images/background.jpg);
    background-size: cover;
    }

when doing this the background image goes wider (to the right) than the width of the parent div.

https://jsfiddle.net/2cs60vrr/3/ example, just made the background red to show how wide it should be, the background image goes much wider

3
htmlcsstwitter-bootstrap
Can you please reproduce what you have so far in jsfiddle? – AndrewL64
couldn't you just put the background image on the parent container or a wrapper instead of having to mess with z-index? – happymacarts
<!-- comments do not work in css btw use /* comment */ instead – happymacarts
@AndrewLyndem jsfiddle.net/2cs60vrr/3 – Steven Spieler
The width can be solved by adding position:relative to your grid. I don't have the issue with more divs the wanted going behind the menurow. – Benneb10

3 Answers

2
votes

Point 1

You didn't used .container class in your HTML. Bootstrap has a structure to get it's maximum feature. You must need to use .container. Bootstrap structure is below: 

<div class="container">
    <div class="row">
        <div class="col-*-*">
            Your Content
        </div>
    </div>
</div>

Make your html as above to solve this issue.

Point 2

If you want not change your html, then use this code below to any .row to solve this issue. 

margin-left:0;
margin-right:0;
0
votes

I am sorry if we are unsure what you are looking for but is that what you want?

.grid {
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
    background-color: #fff;
}

.row {
    width: 100%;
    margin-bottom: 0px;
    display: flex;
}

#MENUROW {
  position: absolute;
  height: 80px;
  background-color: red;
  z-index: 2;  
}

#MAINROW {
  position: absolute;
  z-index: 1;
  top: 0;
  width: 100%;
  max-width: 1400px;
  background-image:    url(https://upload.wikimedia.org/wikipedia/commons/e/ed/Palais_Garnier.jpg);
  background-size: cover;
}

https://jsfiddle.net/norcaljohnny/xt9c9d2r/2/

0
votes

You should put the wrapper around the whole thing to position:relative; And both rows to position:absolute;

That's it.

When using position:absolute; the block goes to the absolute top left corner of the closest parent html tag that has a position:relative;. If there is no parent with position:relative; your absolute positioned items go to the upper left corner of your screen.

(the first row is not a parent of the second, but they are siblings. The wrapper "grid" is the parent of the 2 rows)

<div class="grid">
  <div class="row" id="MENUROW">
    <div class="col-md-12" id="MENUCOLUMN">
      <h1>SHOP</h1>
    </div>
  </div>
  <div class="row" id="MAINROW">
    <div class="col-md-12" id="MAINCOLUMN">
       text
    </div>
  </div>
</div>

And CSS

 .grid {
    position: relative;
 }

.row {
    width: 100%;
}

#MENUROW {
  position: absolute;
  background-color: red;
  z-index: 1;
}

#MAINROW {
  position: absolute;
  z-index: 2;
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ed/Palais_Garnier.jpg);
  background-size: cover;
}

Here is your updated example: https://jsfiddle.net/2cs60vrr/6/