Heyo, I’m using a 2000px width image as a background for a 960px width webpage. I am trying to make it so it doesn’t show a horizontal scrollbar when a part of the image is to the right of what’s visible, but what I’m trying to do is not working for me.
Two IDs are involved. One is ‘bg’ which has the background image as its background and is positioned where I want it, while the other is ‘bg_holder’ which contains only ‘bg’ and which I tried to use to neatly cover the visible web page area and hide its overflow so the part of the background image that is jutting out wouldn’t cause a scrollbar. But this does not appear work, as a scrollbar is created when there is a part of the image to the right of the visible web page (but not when it’s to the left).
Is there anything wrong with this CSS snippet? Could something outside of this snippet be the source of the problem? Is there another approach I can take?
#bg_holder {
position: absolute;
overflow: hidden;
min-width: 960px;
top: 0px;
left: 0px;
right: 0px;
height: 100%;
}
#bg {
background: url(../img/bg.jpg);
position: absolute;
height: 1050px;
width: 2000px;
margin-left: -1366px;
left: 50%;
z-index: -1;
}
To answer your question, by positioning #bg absolutely, you take it out of the document flow / out of it’s parent element, so the overflow:hidden has no effect.
As an additional comment, you can position the background image exactly where you want (x, y) when you put it directly in #bg_holder, there doesn’t seem to be any need to put the background in a separate div. As far as I can tell at least, but I haven’t seen the rest of your code and don’t know what you want to achieve exactly.