background-attachment:fixed; issues

[IanS]

Hi all,Using strict doctype -If adding 'background-attachment:fixed;' -Background doesn't show at all on Firefox, MSIE, or SafariIf not adding 'background-attachment:fixed;' -Shows but is not fixed, it scrolls away on MISE and Safari.Doesn't show on Safari on Mac.Works fine (in place and fixed) on Firefox.If alter doctype to non-strict, say 'frameset.dtd', it works fine all round (I think...). But this then screws up some other elements on the site.(Not tried IE8, but if it doesn't go on Firefox...All tried on PC and MacOSX)I read in the tutorials that there was a issue with 'fixed' and Firefox -">>> NOTE: For this to work in Firefox and Opera, the background-attachment property must be set to "fixed"."But 'fixed' seems to prevent it working at all on Firefox.Have also tried without 'position', makes no difference.Any workarounds/suggestions/corrections for this?All I can come up with is use non-strict for this single page.I'm now in a complete puzzle, need help!----very simple page, nothing difficult going on - empty container and content container.<div id="contentContainer"> <div id="disclaimerContent"> <p class="med"> Disclaimer...text...</p>stylesheet --#disclaimerContent { background-image:URL(files/faderBG.jpg); background-repeat:repeat-x; background-attachment:fixed; have tried adding and removing background-position:top; have tried adding and removing width: 340px; height: 400px; overflow: auto; border-left: 1px solid #dddddd; border-bottom: 1px solid #dddddd; margin-top: 40px; padding-top: 20px; padding-bottom: 10px; padding-left: 10px; padding-right: 60px;}cheers,Ian

[cousineaug]

stylesheet --#disclaimerContent { background-image:URL(files/faderBG.jpg); background-repeat:repeat-x; background-attachment:fixed; background-position:top; width: 340px; height: 400px; overflow: auto; border-left: 1px solid #dddddd; border-bottom: 1px solid #dddddd; margin-top: 40px; padding-top: 20px; padding-bottom: 10px; padding-left: 10px; padding-right: 60px;}

here is the problem. You are fixing the background top and then pushing the top 40 px away with the margin. I amn guessing your background image is less than 40px tall?so try this

#disclaimerContent {		background-image:URL(files/faderBG.jpg);		background-repeat:repeat-x;		background-attachment:fixed; 		background-position: 0px 40px;  /* left zero top equal to margin-top*/		width: 340px;		height: 400px;		overflow: auto;		border-left: 1px solid #dddddd;		border-bottom: 1px solid #dddddd;		margin-top: 40px;	padding-top: 20px;		padding-bottom: 10px;		padding-left: 10px;		padding-right: 60px;}

then test in all browsers. Seems to work ok in Chrome this way..good luck.........Guy

[IanS]

Thanks Guy,I tried your code -- still doesn't show at all in FF.If I remove 'attachment:fixed' it came up but displaced down the page by 40px.So took all margins and padding away just to see. Still didn't work.Btw, I tried this without the top positioning, and still is the same.Also, I was wrong above. I tried changing the page doctype to non-strict and it still didn't work.Ian

[dsonesuk]

The problem here is, while you fix the the image to the background of the div container, this div will still scroll, (well unless its position:fixed; itself), and can only be seen, when the div container is directly above it.You will also notice as you scroll the bg image seems to shudder into view, To be honest, I have never used fixed image before within a div container, but always within the body only, which seems to make the div containers, transparent, where as, the div container in you example, overlap with white background, which may be fixed by using position: relative; with z-index: styling on these divs, to bring them to same level as the background layer.

[IanS]

I was also dubious about using a fixed image in a div -- never done it before.Its only that this works fine in FF... so long as the .css doesn't say fixed!!It was only when I came to check on a Windows machine in IE that I realised something was afoot -- probably with my code.But its such a simple page... don't get it....Must say I'm deeply disappointed. Looks like I might have to dump the idea. Maybe fixed bgs are not meant for divs? I don't actually know

[dsonesuk]

You will have a problem, whenever the page height is smaller than the div container, or content exceeds browser height, like i said the other option is to use position fixed for this container, which will force it be permanently displayed, and out of the flow of other element (it occupies no space, and therefore not influence the layout other elements), so you will have to set all element away from this container, so it wont overlap/underlap them.

[dsonesuk]

Forget last post, I thought this reminded me of something similar, you dont need background-attachment:fixed; background-position:top;Or position fixed, just use position absolute container to place image in contentContainer container, it will remain fixed, it is not affected by the scrolling of disclamer div, again because it is taken out of the flow of other elements when you use absolute position.

<div id="contentContainer"><div id="disclamerBG"></div><div id="disclaimerContent">	  <p class="med"> Disclaimer...text...</p></div></div>

then use

#disclaimerContent {	  height: 400px;		overflow: auto;		border-left: 1px solid #dddddd;		border-bottom: 1px solid #dddddd;		position: relative;padding:0; margin:0;color:#fff;padding:0 10px;}#contentContainer{				height: 400px;		position: relative;		margin-top: 40px; width: 400px;}#disclamerBG{background:url(files/faderBG.jpg) repeat-x 0 0; position:absolute; top:0; left:0; bottom: 0; right: 0;}

[IanS]

I dont understand this.Page height? You mean the overflow?There is only text inside the div. Its the content text which scrolls. The div stays put. The background image in the div should stay put as well, just as it does if you use it in the body.Why is it working perfectly in FF when the background-attachment is not fixed?Try this code with an image but remove the 'fixed' line. You see... it works!But its a pain anyway. Different browsers doing different things, you could get old messing with this.There was Guy saying he made it work in Chrome. Didn't work here in FF or IE.But yes, I'm toying with the idea of fixing the bg image behind the div which will be transparent. Or some variation on that. If this works in all browsers its good enough for me.Thanks ......but I still can't figure out what you're talking about!!

[dsonesuk]

I got it to work in FF, IE, BUT if you resize the browser, to a size smaller than div container a vertical scrollbar appear for that page, and then by using that scrollbar, it will cause the div container to move, and when it moves, the image moves out of view.

[IanS]

Thanks for this.Sorry, we seemed to have overlapped - I haven't tried your second suggestion yet, only just seen it.Will do later (Big day at hospital today so I'm a bit distracted!!).I'll be back....cheers,Ian

[IanS]

.GENIUS! Even works perfectly on IE7.No problem with the image moving out of view if scrollbar appears. It moves with the container div, exactly what I want. Perfect.Still haven't got my head round exactly how this works technically... I know you've explained it - still have some ways to go with CSS ground-level principals.I am in your debt... for whatever that's worth.Many thanks!cheers,Ian