Question

I am currently working with images and backgrounds css positions. I have been struggling trying to get the same image appear beside(left/right) the the content area. I am trying to have the image position not be affected with pagee re size .

How can i get the same picture to appear beside the content area? EXAMPLE

This what I am aiming for:

Answer 1

Here’s my stab at it. I used an absolutely positioned div positioned in the center to contain the images and then used position relative to get them to specific pixel positions to either side. The trick is that if you don’t use relative positioning, they are on top of one another so you have to apply a top: equivalent to the height of the image to one of them to get it to shift to match.

HTML:

    <div id="image_container">
        <div id="img_r" class="outside_image">
            <img />
        </div>
        <div id="img_l" class="outside_image">
            <img />
        </div>  
    </div>

CSS:

#image_container{
  position: absolute;
  top: 0px;
  left: 50%;
  width: 0px;
  z-index: 900; /* not really required */
}

.outside_image img{
  width: 200px;
  height: 200px;
}
.outside_image {
    position: relative;
}
#img_r{
  float: right;
  right: -725px;
  top: 200px;
}
#img_l{
  float: left;
  left: -725px;
}