css help
- Started
- Last post
- 11 Responses
- leftwave
i suck at css. can someone please show me how i can get horizontal scrollbars on this page for people with a low resolution monitor who currently can't scroll left/right... while keeping the background height/width 100%?
thanks!
- 7point340
you mean you only want to scroll the text?
background-attachment: fixed;
not exactly sure what you're asking for.
- neverblink0
not as easy as you might think, setting
body{ overflow: auto; }
will generate the scrollbars, but will also stop your background from stretching like you want it to..
- amullins0
remove (according to firebug)
html { overflow: hidden; }
- neverblink0
yeah, the 100% background image size is actually set to the height of the viewport (browser inner window) not the height of the document! This causes the whitespace to appear when people scroll..
You will need to put the background image inside a div that is set to 100% width and 100% height, then with javascript do something like..
body.onresize
get the document's dimensions
then check if the viewport is smaller than the document
if it is smaller you'll have scrollbars
if there are scrollbars reset the size of the container holding the backgroundimage to the size of the documentnote that onresize only fires after the mouse has been released.. so while resizing the backgroundimage will not resize and you will still get whitespace.. The only way around that is having a continously running script, which will make your site uber-slow ;)
- btw. this will probably be solved in CSS 3 (background-size property)neverblink
- sorry "document.onresize"neverblink
- leftwave0
thanks for the tips. is there a better way that involves stretching the background to 100% and then keeping it static (unscrolling) while the content is able to scroll horizontally? if so, can someone tell me how i would code this? thanks much!
- background-attachmen... fixed; not sure about the stretching part7point34
- leftwave0
ypiee! i think i got it. does this work??
- Corvo20
I'm about to leave the office but maybe this will help:
- acescence0
scrolling works but i see two backgrounds now
- neverblink0
what I would suggest is make a background-image that fades to grey on the outside.. then place it in the center with something like
body{
background: url(background.gif) #CCC center no-repeat fixed;
}