1

I have the following problem: I'm working on this site and using a picture as a background of 1 div. Inside this div I have another 2 dives - logo and navigation. Last /outside of the div with the picture/ is the footer, whos background must be other color, not the picture. I set the css to the div with the picture like this :

#background{
  position: absolute;
   z-index: -1;
   display: block;
}

Here is the html :

  <div id="pic">
    <img id="background" src="picture.jpg">
    <div class="row" id="logo">
   </div>
  <div class="row" id="example-menu">
  </div>
</div>
<div class="row" id="footer">
  <div class="medium-3 columns medium-offset-1" id="worktime">РАБОТНО ВРЕМЕ: </br> ПОНЕДЕЛНИК-ПЕТЪК </br> 08:30-19:00ч.</div>
  <div class="medium-8 columns"></div>
</div>

But the problem is that the footer also goes over the div with the picture and my design is not like this... I need to keep the whole picture to be seen.

Thanks in advance !

pantofche
  • 11
  • 1
  • 3
  • Instead of saying I have this on that, why dont u just put the simplified version of your HTML ? – Peyman Mohamadpour Feb 02 '16 at 20:03
  • The [initial value for `z-index`](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index#Summary) is `auto`. I'm not sure that's what you need for this situation, but setting `z-index:auto` is the correct way to reset `z-index`. Please provide your markup for further assistance. – Joseph Marikle Feb 02 '16 at 20:03
  • Did that solve your problem? If the problem resolved, please consider accepting my answer. – Peyman Mohamadpour Feb 26 '16 at 05:04

2 Answers2

0

Option 1

Instead of using <img>, put the background using CSS

HTML

<div id="pic">
    <div class="row" id="logo"></div>
    <div class="row" id="example-menu"></div>
</div>
<div class="row" id="footer">
    The footer content
</div>

CSS

#pic{
    background: url( 'picture.jpg' ) no-repeat;
}

Option 2

Use fixed height for the parent div, #pic in this case: HTML

<div id="pic">
    <img id="background" src="picture.jpg">
    <div class="row" id="logo"></div>
    <div class="row" id="example-menu"></div>
</div>
<div class="row" id="footer">
    The footer content
</div>

CSS

#pic{
    position: relative;
    height: 100px; /* This should be the height of the background image */
}
#background{
    position: absolute;
    z-index: -1;
}

Option 3

You may use position:absolute for the .rows instead:

#pic{ position: relative; }
.row{ position: absolute; top: 0; z-index: 99; }
  <div id="pic">
    <img id="background" src="https://placehold.it/200x100">
    <div class="row" id="logo">This is logo</div>
  </div>
  <div id="footer">
     The footer content
  </div>
Peyman Mohamadpour
  • 17,954
  • 24
  • 89
  • 100
  • It's not an option - picture is loading much slower and the background is flashing... – pantofche Feb 02 '16 at 20:06
  • Thanks a lot, it works, but the design is responsive and looks wierd when on small sreens... really wondered if possible to just simply put the footer below the pic... :( – pantofche Feb 02 '16 at 20:20
  • very kind of you, really appriciate it ... still not working, everything went below the pic ... see when you run the code snippet - looks the same ... – pantofche Feb 02 '16 at 20:35
  • @pantofche I am sure, this is the desired output. please refresh the page and run the snippet. – Peyman Mohamadpour Feb 02 '16 at 20:36
  • OMG YES! May be I had a problem with the browswer after refreshing non stop ! Thanks so so much !!! – pantofche Feb 02 '16 at 20:44
0

the issue is with the z-index of the div containing the image and the div containing the footer.

the easiest solution is to put the footer after the div with your content. The only time z-index should come into play is if you are trying to put items on top of the image for effect.

<div id="content-wrapper">
  <div id="nav">
      <span>NAV</span>
  </div>

</div>
<div id="footer">
  <span>FOOTER</span>
</div>

you can easily add the footer in the container, attach at the bottom as well. see if this example helps: https://plnkr.co/edit/GDfzul2qKApw6JGhQSbb?p=preview

Frederick Jaime
  • 169
  • 2
  • 6
  • Thanks, but the footer is not inside the div with the picture. And yes - I need two divs over the image for effect :( – pantofche Feb 02 '16 at 20:31
  • i updated the link, the footer and nav are inside. the Footer is attached at the bottom, and the container is set to 100vh. check it : https://plnkr.co/edit/GDfzul2qKApw6JGhQSbb?p=preview – Frederick Jaime Feb 03 '16 at 01:14