How to keep centered image in between two
's

Question

I have the following design in which i have an image in between two <div>'s. my aim is to keep the image between the two divs.

in this example, I want the main image (400x200) to be in between the green image(#firstLayer) and the gray(background for body). My solution works well in Firefox 16, safari, and Chrome, but doesnt work in IE. In IE the image gets displyed on top of the #firstLayer.

here is a JFiddle of the problem

and here is the html and css for quick view:

HTML:

<body>
<div id="firstLayer">
  <img id="image" class="center" src="http://lorempixel.com/400/200/" >
         <div id="mainContent">
          main page content
         </div>
  </div>
</body>

CSS:

body{
 background:gray;  
}
#firstLayer{
    background: url("http://www.enough.de/fileadmin/docimport/images/background-image.png") no-repeat;

    height:500px;
    width:500px;

}
img#image{
 z-index:-1; 
}

.center{
    width: 400px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -100px;
}

What is the Fix for this problem in IE?

Is this what you wanted to achieve? http://jsfiddle.net/vW9bn/9/ — Aaron Brewer, Nov 01 '12 at 15:36
There is a bug in IE which will ignore z-index if an element is positioned relative or absolute: http://stackoverflow.com/questions/2473171/ie7-relative-absolute-positioning-bug-with-dynamically-modified-page-content I would recommend putting "position: relative" on your #firstLayer div to keep that ontop, if that is what you are trying to achieve. — Andy, Nov 01 '12 at 15:41
@AndrewPope: Do you understand fully what vineetrok is trying to achieve? — Aaron Brewer, Nov 01 '12 at 15:44
@AaronBrewer nope, see, ignore the opacity that i added, I just want the image to be in between the body background and the `#firstLayer` in IE — md1hunox, Nov 01 '12 at 15:46
@AaronBrewer: refer to this http://jsfiddle.net/vW9bn/11/, view it in firefox, i want it to be the same way in IE — md1hunox, Nov 01 '12 at 15:49
@vineetrok: Ohh... Oh yes, IE has many problems when using Z-Index. You may refer to these links for more help resolving the Z-Index issue: http://css-tricks.com/snippets/jquery/fixing-ie-z-index/ and http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/ — Aaron Brewer, Nov 01 '12 at 15:49

score 1 · Answer 1 · answered Nov 01 '12 at 16:43

Try something like this.

 <div id="firstLayer" style="width:700px;height:700px;text-align:center;">
         <center>   <img id="image" class="center" src="My_Signature.jpg" 
                                   style="width:400px;height:200px;" > </center>
         <div id="mainContent">
          main page content
         </div>
  </div>

Hope, it will helps you. Cheers. !!

Andy · Accepted Answer · 2013-12-23T16:16:42.657

1

Try adding position:relative; to your #firstlayer div:

#firstLayer {
    position: relative;
}

This is to do with a bug in IE that will ignore z-index on your image because it is absolutely positioned, adding position relative to the parent div solves this problem.

edited Dec 23 '13 at 16:16

answered Nov 02 '12 at 09:38

Andy

4,538
2
26
34

score 0 · Answer 3 · answered Nov 01 '12 at 16:25

0

to center you image you can try 2 options:

1- put your image inside "center" tag.

ex:<center><img id="image" class="center" src="http://lorempixel.com/400/200/" ></center>

2- use this css class on your image.

img.center{ display: block; margin: 0 auto;}

answered Nov 01 '12 at 16:25

ebram khalil

8,252
7
42
60

My problem is not centering the image, i've already done that, i want to keep it in between the body and the `#firstLayer` division – md1hunox Nov 02 '12 at 05:10
I would also just like to point out that is deprecated HTML and it is far more advisable to use the CSS alternative. – Andy Nov 02 '12 at 09:41

How to keep centered image in between two 's

3 Answers3

How to keep centered image in between two
's