Okay so I've got some position: fixed background images in my site. Problem is I only want them fixed for left and right. Meaning when the site scrolls up and down I'd hope that the fixed Backgrounds would go up and down too. They're not. I need them fixed because I've got repeating backgrounds that need to stay in place when you shrink and expand the window so the design of the site doesn't die. Yet I want you to be able to scroll up or down without the darned site being violently ripped in half. Right now it's basically a Background problem I think since the only parts of my site that aren't scrollable are background parts meant only for the design of the site. I'm using Divs (finally switching from tables but I'm not the best at Divs...). Code I'm using: #bgbanner { background:url(images/bgbanner.jpg) no-repeat fixed #031829 center 0px; min-width: 0px; width: 100%; } #banner { background:url(images/banner.jpg) no-repeat fixed transparent center 0px; min-width: 0px; width: 100%; } <div id="bgbanner" style="position: absolute; height: 180px;"></div> <div id="banner" style="position: absolute; height: 180px;"><center><img src="images/banner.jpg" /></center></div>
I understand that fixed fixes it on the page. What I need specifically is some way to do the exact same thing except make the graphics scrollable. I don't know if this is because they're BGs, it's probably not. Absolute doesn't work because it destroys my repeating background.
Help! When I use Fixed it forces the Div to show everything all 100% across the page and it repeats the background. When I use absolute the background no longer shows even when I try to force the Div's size plus the background won't move with the window and off screen to the left when the window is resized which I need to maintain the integrity of the design! :O I need a scrollable fixed! One fixed to the center of the screen but not fixed on the vertical plane! Meaning I can scroll!!! Also my bg image will fall off the left side a bit if the window go too big.
Oooooh myyyy gaaawwwd!!! So unhelpful. Anyways I FINALLY found out a way. If I stick iframes in and make the background an actual separate HTML document the Divs refer to their 0 0 point as the top left of the iframe and since they're a separate element, a completely different page, they can scroll too even when the Div within that separate page is FIXED. Cut some borders and stuff and it WORKS!!!
Could I please see the site that you are referring to? I think I understand but I am not sure and I am positive there's got to be an easier way then creating several separate HTML documents. If I get it right, you want it to scroll horizontally but not vertically?
I only need to make 1 separate HTML document which contains everything that I need in Position fixed (about 6 background images) and I need to scroll either way. The end site, though split in two, is actually smaller this way for separate coding reasons. It's basically the half of the site with the updatable content, non-fixed backgrounds like the banner, etc. Then the other half of the site in an iframe separate html document carrying all the fixed backgrounds. BUT it's scrollable BOTH ways like I wanted. For the iframe's background html I just did stuff like this: #bgfilm { background:url(images/blurfilm.jpg) repeat-x fixed transparent center 0px; width: 100%; top: 0px; min-width: 846px; } Then put in the body <div id="bgfilm" style="position: fixed; height: 48px;"></div> And changed the files, size and distance for all the backgrounds in the file. For the main page I just stuck an iframe in there normally. Nothing real special with the code. <div id="bgfilm" style="position: absolute; height: 486px;"><center><iframe src="bgfilm.html" height="486" width="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe></center></div> It's literally just sticking two halfs together using two html documents. I was able to get rid of some of the repetativeness so it's all smaller too by a bit. It doesn't seem to have any undo lag and it works with all the major browsers. I'm really quit happy with it. My boss and friends couldn't find a way to fix my problem using html or css then I though that maybe with an iframe it would make the position: fixed change it's 0 0 reference point to the top left of the iframe INSTEAD of the top left of the physical window. I'm sure there's a better way but whatever.
Well, the code you have is pretty simple. I take it that since it's an ID opposed to class you only plan on using it once in each HTML document so why not add the additional style=position: fixed; height: 48px; and make it #bgfilm { background:url(images/blurfilm.jpg) repeat-x fixed transparent center 0px; width: 100%; top: 0px; min-width: 846px; position: fixed; height: 48px; } Code (markup): into your CSS Template as well? IFrames are a bit outdated so why not make that inline frame a scrolling div? You can always stick a divider to hold your content (you know, just your text) within another div tag, which would hold your background. <div id="bgfilm"> <div id="content"> {{ your content here }} </div> </div> Code (markup): Do you have a site that's up or is that what you're working on doing?