Search code examples
cssimageinternet-explorerpositioncenter

CSS positioning images on top of eacother and make center bar

Hey guys I simply cannot get this to work.

I have some content that is centred on the page using the margin: auto; "trick".

In this content I have an image. I need to make a color bar coming under the image continuing out to the sides of the browser. On the right side I need it to look like its coming up onto the image.

I have made this picture to try an graphically show what I mean: image

As you can see the bar runs from the left to the right side of the browser. The centred image is just placed on top of it and then an image positioned on the top of the image. But I haven't been able to get this working. Any one who would give it a go?

I tried positioning the bar relative and z-index low. This worked but the bar keep jumping around in IE 7-8-9. Centring the image wasn't easy either and placing that smaller image on top was even harder. It wouldn't follow the browser if you resized it. The problem here is that the user have to be able to upload a new picture so I cant just make a static image.

Please help I am really lost here

EDIT:

Tried the example below but when I run the site in IE 7-8-9 I have different results. link

Solution

  • I have made a jsFiddle which should work in Chrome and IE7-9: http://jsfiddle.net/7gaE9/

    HTML

    <div id="container">
<div id="bar1"></div>
<img src="http://placekitten.com/200/300"/>
<div id="bar2"></div>
</div>​

    CSS

    #container{
   width: 100%;
    margin: 0 auto;   
    background-color: red;
    text-align: center;
    position: relative;
}
#bar1{
    background-color: blue;
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 1;
    height: 30px;
    width: 40%;
}
#bar2{
    background-color: blue;
    top: 50%;
    left: 0;
    z-index: 3;
    height: 30px;
    width: 40%;
    position: absolute;
}
img{
    text-align: center;
    z-index: 2;
    position: relative;
}
​
​

    The key here is that the container is positioned relative, thus enabling absolute positioning of the child elements in relation to their parent. Use z-index to control how the elements are stacked.