Fixed Backgrounds CSS IE/Moz

[Spirited]

I am using notepad to code a new design in css and xhtml and have become stumped by I.E.'s liberal interpretations of the W3C coding standards.

The main content area of my page is in a DIV (screen) box, and the area I am working on is the main text area, a DIV (bodyarea) within that. I am finding this difficult to explain so hear me out. DIV.screen has a photograph for the background and the DIV.bodyarea needs to be a semi transparent picture (with background of DIV.screen) shining through, but it has to be able to scroll with a fixed background (so that it doesn't break up the photograph).

I.E. wrongly assigns the background of DIV.bodyarea to be fixed to the containing element (DIV.screen) - so in I.E. it looks fine but in Moz Firefox the photograph is wildly "out of place" (despite being correct). To solve the problem a tutorial I found on google suggests removing the "background-attachment:fixed;" to get Moz to show the page correctly - and it works. :D

However, now the background is not fixed in IE - so whilst it sits nicely, as soon as you begin to scroll, you can see the background is not fixed and an unsightly white background takes its place.

Does anyone know a decent workaround for this, or shall I just put my beloved firefox to bed and concentrate on the majority of users using I.E. (This design is for my personal site so no need for professionalism - except for practice )

The only trouble with that is that with the tutorial fix Moz FF works perfectly and IE is ledgible - but without the fix I.E. is (near) perfect but Moz FF is unusable and illegible

 

[James]

Internet Explorer for Windows simply doesn’t support fixed positioning, so you won’t be able to make it cooperate in this regard. It is possible to give Internet Explorer 5.5 and up basic support for fixed positioning using JavaScript (here’s the script ), but you will probably find that the jerky scrolling and large JavaScript file don’t work out. This still leaves Internet Explorer 5.x to contend with.

Mozilla correctly handles positioning of CSS positioned backgrounds, you just have to tell it where to put them. Because you cannot fixed position (assuming you don’t use the JS above) you have to place the background relative to the containing element. That means, in this case, you should align the background image to the bottom of the divs you wish to display, and simply accept the fact that the space above, in pages with a lot of vertical height, will not show your image right away. A third choice is to rethink your design.

CSS to position a background at the bottom of the page:

.foo { background: url(foo.jpg) no-repeat center bottom; }

You can use integers to place a background exactly according to a position in the containing element (in place of center/bottom/etc.).

 

[Spirited]

I've actually found another method of doing my design which will also make it more liquid - (before I had seperate stylesheets for different resolutions)

I haven't got it completely figured out yet, since I only just found it - but there is a method to make the div background (and contents if you fancy it ) semi transparent - instead of using images - by using the alpha transparency option.

I'll post up the code I've used once I rewrite the stylesheet from scratch (to get rid of unnecessary code that I think is interfering with my new method.)

Thanks,

Spirited

 

[James]

I know it is possible with JavaScript, if not a little more complicated and larger in size. Test well if that’s the case. If not, I’d love to hear what you’ve found out, because this shortcoming has frustrated me plenty…