Div background doesn't position with the Div.

Question

I have a couple of Divs which I style using a class and an ID, he div's themselves are emtpy since they are only placeholders for their background. Example Div:

<div id='ranImg1' class='ranImg'> </div>

Then I style them using this css:

.ranImg{
 position:fixed;
 z-index:0;
 width:250px;
 height:250px;
 display:block;
}
#ranImg1{
 left:10px;
 top:200px;
 background-attachment:fixed;
 background-image:url(http://localhost/MyAlbum//images/background/ranPaperclips.png);
 background-repeat:no-repeat;
}

As long as the Div is in the left top of the document the Image shows correctly but when the Div is placed somewhere else on the page the image stays (invisible) in the top left corner of the page showing only the part which overlaps with the div (in the example this would be the bottom part of the image).

EDIT I'm trying to position these Divs without effecting my other layout, they are behind the other layout. This works except for the fact that the background image doesn't follow the divs position.
So basically my question is, why isn't the background for the ranImg1 div positioning with the div but stays in the left top corner, and how to fix this?

Answer 1

I believe 'fixed' position is in relation to your browser view port - what are you trying to achieve with your code?

Answer 2

your background-attachment:fixed will attach the background image relative to the browser window. if you want it to "follow" the div position, just remove the line:

#ranImg1{
  left:10px;
  top:200px;
  background-image:url(http://localhost/MyAlbum//images/background/ranPaperclips.png);
  background-repeat:no-repeat;
}

you could also set the background-position attribute to set the background relative to the containing div:

background-position: 0px 0px;

i'm not sure if that would help any beyond just removing background-attachment though (not enough coffee yet!)