CODEWITHSUNDEEP
cssbackgroundcss-positionhorizontal-scrolling
spez86
spez86

Reputation: 732

Kill Horizontal Scroll On Absolute Image with Body as Parent

I haven't asked too many CSS questions on here, so here it goes.

Let's say I have a page:

<body>
   <div id="wrap">//page containment, etc.. goes here..</div>
   <img class="custom-bg" src="example.jpg" />
</body>

Then I write some CSS for the image in particular:

#wrap {
   z-index: 100;
}
img.custom-bg {
   position: absolute;
   top: 1000px;
   left: 50%;
   margin-left: -960px //the image is 1290px wide
   z-index: 0;
}

If you can't tell by now, yes, I'm trying to create a background image using absolute positioning. Yes, I know, I can just set the image as a background to the body tag and use positioning to place it, but for the sake of this question, let's say that's not an option to me.

The issue at hand is the appearance of horizontal scroll bars. Google is full of examples with people turning off overflow and other things, but I'm curious if anyone has been able to find/create a definite approach to removing horizontal scroll bars when performing something like the above. An absolute image, that lives happily on it's own. Centered. And not "attached" to the window... Thus eliminating the need for the browser to let users know there's an image that's really big, and that they just have to see it by scrolling horizontally a little bit.

Any insight would be awesome. I included as little code as possible so that people who may search for this example and are new to web dev, may have an easy time understanding how to work through their problem regarding absolute positioning and horizontal scrolling.

Upvotes: 2

Views: 767

Answers (1)

shanethehat
shanethehat

Reputation: 15570

I may have missed the point here, but why don't you just use position:fixed instead?

http://jsfiddle.net/shanethehat/7MetS/

Upvotes: 1

Related Questions