Can a large div not trigger browser scroll bars?

Question

I have a large div housing my background image. Generally, it will be centered with the sides going off the screen. Because it is background, I don't want scrollbars to show up on the browser- is there a solution here?

Thanks

EDIT: Let me clarify based on the answers:

I have a large image that extends beyond the browser's boundaries, but that I need to assign to a div background or img instead of the body background because I'm manipulating it w jquery, etc.

I know it is not possible for a div's background image to extend beyond its borders.
I also can't use an img or nested div with overflow:hidden because that would hide the overflow, when all I want is for it to not trigger scrolls, i.e. be ignored physically by layout engine but still be shown visually, just like an overflowing body background would.

It's probably worth explaining why you can't use the usual solution (of just using a background image in CSS) (I'm assuming there is a good reason :) — psmears, Oct 29 '10 at 22:43
Is there a reason you can't just set the image as the background via CSS instead of hacking a div (background-image: url('filename.ext');)? — Justin Niessner, Oct 29 '10 at 22:45

score 1 · Answer 1 · answered Aug 06 '12 at 09:38

I just ran into the same circumstance as you do.

After a little experiment I found that it is caused by the wrong value the CSS property 'position'.

When I changed the position setting of the div from 'fixed' to 'absolute', things go as exactly what you want.

score 1 · Answer 2 · edited May 06 '16 at 19:16

1

This worked for me; I recall learning that it didn't work in Opera, but that was quite some time ago.

html, body { overflow-x: hidden; }

edited May 06 '16 at 19:16

t3dodson

3,949
2
29
40

answered May 12 '15 at 19:23

Beaumont

31
2

score 0 · Answer 3 · answered Oct 30 '10 at 19:29

Based on the additional info I came up with this example. The image is the background of a div that fills the whole visible area and pretty much acts just like it's the body's background image (tested in firefox). You could even scroll around the image by modifying the background-position attribute.

<html>
<head>
<style>
#test {
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background-image: url('http://farm5.static.flickr.com/4121/4805074237_6cf5880f75_o.jpg');
    background-position: 50% 50%;
    overflow: none;
    z-index: -1;
}
</style>
</head>
<body>
<div id="test">
</div>

Here's some other stuff in the body of the page.

<div>
and some stuff in a div in the body of the page.
</div>

</body>
</html>

Can a large div not trigger browser scroll bars?

3 Answers3