Text over footer image

Question

I want to have a copyright text over my footer image, so i made a paragraph with the id "copyright". This is in my css file:

.footer {
background: url(../images/footer_extend.png) repeat-x center;
overflow: hidden;
 }
.footer img {
    display:block;
    margin:0px auto;
    max-width:970px;
    height: 130px;
    overflow: hidden;
}
#copyright{
position:absolute;
color:#000;
bottom:1px;
left:46%;
}

So the text should be centered, white and at the very bottom of the page. But for me, the text is in the middle of the page (not at the bottom). Why and how can I fix that?

Oh, this is my html file:

<div class="footer">
    <img src="images/footer.png" width="970" height="130" alt="" />
    <p id="copyright">© 2013</p>
</div>

Answer 1

For div#copyright to be absolutely positioned relative to div.footer, div.footer needs to be relatively positioned.

By default, divs are positioned statically, so you'll need to explicitly specify relative position:

.footer {
    position:relative;
    background: url(../images/footer_extend.png) repeat-x center;
    overflow: hidden;
}

Working example below:

.footer {
  position: relative;
  background: url(../images/footer_extend.png) repeat-x center;
  overflow: hidden;
}

.footer img {
  display: block;
  margin: 0px auto;
  max-width: 970px;
  height: 130px;
  overflow: hidden;
}

#copyright {
  position: absolute;
  color: #000;
  bottom: 1px;
  left: 46%;
}

<div class="footer">
  <img src="images/footer.png" width="970" height="130" alt="" />
  <p id="copyright">© 2013</p>
</div>

View on JSFiddle

Answer 2

You probably want to add position: relative to .footer