ansaurus

Question

Prevent background images from allowing scrolling

Answer 1

A:

Add a CSS overlow:none attribute

So if it is displayed in a tag, add the following to the CSS for that element.

#oneDiv{
width: 960px;
height: 100px;
overflow:none;
}

That should do the trick.

Ryk 2010-07-06 04:50:37

Doesn't do it. I think that is if I wanted to stop the div itself from creating scrollbars for its own content - but I want to stop the div from creating scrollbars on the browser window when it goes offscreen.

Dave W. 2010-07-06 13:54:55

Answer 2

A:

Edit:

I've uploaded the project here http://www.mediafire.com/?cndgyaq4grw, hope it help.

previous answer:

Add position:fixed; right:0px; bottom:0px; to your background-stripe-bottom div.

Jeaffrey Gilbert 2010-07-06 09:00:44

that changes the behavior - I don't want it always visible in the same spot. It should act like part of the page itself, just not triggering scrolling itself.

Dave W. 2010-07-06 13:50:25

Sorry I though wrong. Updated.

Jeaffrey Gilbert 2010-07-07 18:18:00

Thanks, but this uses javascript - I want to stay away from that as much as possible. Not everyone has javascript enabled, and even if they do, that is a lot of overhead for a simple effect.

Dave W. 2010-07-07 18:57:15

I'm eager to see the pure CSS solution Dave, this is interesting. I'm thinking about not using javascript and if you have found it please update here :) +1 for you.

Jeaffrey Gilbert 2010-07-07 23:23:59

The best answer I have encountered so far is above, from Douglas. But, as I mentioned in my comments on his technique, while it does achieve the effect with only CSS, it wastes an awful lot of bandwidth on empty images. I'll be sure to update if I encounter a better solution!

Dave W. 2010-07-08 03:17:45

Answer 3

A:

What you need to to is make the background images actually background images, then it will work.

So, first you'll need to add some elements to have background images, like this:

<body>
    <div class="wrapper background-foo">
        <!-- your content div -->
    </div>
</body>

You will need one background div per image, and the div will need to be full width so that your background image can be anywhere. Use background-position to arrange you backgrounds.

One trick that might be useful, if you want to have an image to the right of centred, and sticking out to the side, you could fake it like this:

.background-ffo { background: url(...) no-repeat 400px center; }

and then have the background image look like this:

         +-----------------------------------------+
         |          .background-foo                |
         |                                         |
         |                                         |
         |                                         |
         |                                         |
         |                                         |
         |                                         |
  +------------------------------------------------------------+
  |      |                               ###################   |
  |      |      background image         ###################   |
  |      |                               ###################   |
  |      |                               ###################   |
  |      |                               ###################   |
  +------------------------------------------------------------+
         |                                         |   ^^ the bit of background
         |                                         |      you care about
         |                                         |
         +-----------------------------------------+

Since it is a background, and your background-foo div is still fitting on the page like your content, there will be no horizontal scroll bars.

Douglas 2010-07-06 09:12:44

So I would create an image with transparent pixels just to offset the actual background image so that a background-position:50% and width:100% would work? If so, I am hoping for a somewhat neater solution - that seems like an awful lot of wasted resources (esp. bandwidth) to achieve this effect.

Dave W. 2010-07-06 14:17:08

ansaurus

tags:

views:

answers:

Prevent background images from allowing scrolling

related questions