Prevent background images from allowing scrolling
Link to page: http://www.northtreestudios.com/sandbox/
Wondering how I can get the background images of my site to not trigger the scroll bar due to their width/placement. I am using a 960 grid with 16 columns, but the background has several images at arbitrary positions to create some de开发者_如何学Ctail effects. These do not conform to the grid; they lie to the left and right of the container.
If you check out the link, you'll see that the yellow stripes across the top do not trigger scrolling, but the white one on the bottom does, if the window is re-sized to less than its width.
I am essentially looking to have the horizontal scroll bar appear only when the window is smaller in width than the 960 grid. All the other graphical extras farther left or right should not trigger scrolling. Any way to accomplish this short of a giant, inefficient background image?
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.
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.
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.
加载中,请稍侯......
精彩评论