Top Container Background Problem

Question

Here's a screenshot:

The red bar on the left is the background I set for the #personal div and I would like it to align to the top of the container, vertically.

The problem is that I have a background for the #container-top div on top of the #container div with absolute positioning. Is there any way to move the #personal div up so there would be no space left?

HTML

<div id="container">
  <div id="container-top"></div>
    <div id="personal">
      <h1>Jonathan Doe</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliqua erat volutpat.</p>
    </div> <!-- end #personal -->
</div> <!-- end #container -->

CSS

#container {
  background: url(images/bg-mid.png) repeat-y top center;
  width: 835px;
  margin: 40px auto;
  position: relative;
}

#container-top {
  background: url(images/bg-top.png) no-repeat top center;
  position: absolute;
  height: 12px;
  width: 835px;
  top: -12px;
} 

#container-bottom {
  background: url(images/bg-bottom.png) no-repeat top center;
  position: absolute;
  height: 27px;
  width: 835px;
  bottom: -27px;
}

#personal {
  background: url(images/personal-info.png) no-repeat 0px left;
}

Answer 1

Change the following CSS:

    #personal {
  background: url(images/personal-info.png) no-repeat 0px left;
position: relative;
top: 0px;
left: 0px;
}

You need to position this element relative to it's parent; container, so that it fits where you want. The top and left properties are how far away from the top left corner of the parent div you want the particular element.

Or this:

#personal {
      background: url(images/personal-info.png) no-repeat 0px left;
    margin-top:-10px; /*px value that works*/
    }

This will take its current position within it's parent div and render it 10 pixels higher than it is currently positioned.

Answer 2

[Edit: revamped.]

HTML:

<div id="container">
  <div id="container-inner">
    <div id="personal">
      <h1>Jonathan Doe</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliqua erat volutpat.</p>
    </div> <!-- end #personal -->
  </div> <!-- end #container-bg -->
</div> <!-- end #container -->

CSS:

#container {
  background: url(images/bg-mid.png) repeat-y top center;
  width: 835px;
  /*margin: 40px auto;*/
  margin: 28px auto 40px auto;
  position: relative;
}

#container-inner {
  background: url(images/bg-top.png) no-repeat top center;
}

#personal {
  background: url(images/personal-info.png) no-repeat 0px left;
  padding-top: 12px;
}

Is this according to what you wish to do?

Answer 3

Unless if I'm missing something, I see what you posted producing the results you want.

I'm wondering if you've applied a reset CSS to your styles? If not you could look at the yahoo user interface css reset or Eric Meyer's reset CSS.

The browser might have some default padding and margin spacing.

You include the reset CSS before your other styles. Perhaps you already know this, but it's worth asking.