Div background is not positioned with Div
I have a couple of Divs that I use in the class and ID, it is emtpy itself as they are only placeholders for their background. Example Div:
<div id='ranImg1' class='ranImg'></div>
Then I style them with 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 upper left corner of the document, the image is displayed correctly, but when the Div is placed somewhere else on the page, the image remains (invisible) in the upper left corner of the page, showing only the part that overlaps with the div (in the example, it will be the bottom part of the image).
EDIT
I am trying to position these Divs without doing a different layout, they are behind a different layout. This works, except for the fact that the background image does not match the position of the divs.
So basically my question is, why is there not a background for positioning divImg1 div with div but stays in the upper left corner and how to fix it?
source to share
yours background-attachment:fixed
will attach a background image relative to the browser window. if you want to "follow" by position div
, just remove the line:
#ranImg1{
left:10px;
top:200px;
background-image:url(http://localhost/MyAlbum//images/background/ranPaperclips.png);
background-repeat:no-repeat;
}
you can also set an attribute background-position
to set the background relative to the containing div:
background-position: 0px 0px;
I'm not sure if this will help anyone other than removing background-attachment
it though (not enough coffee yet!)
source to share