Css Fixed Background Attachment

[roryt]

I have just started designing a new site and have decided to use a background that stays still. I have done this by using a fixed attachment in my css. I have used a png file and have found a filter fix from http://homepage.ntlworld.com/bobosola/pnghowto.htm which is quite straight forward.

My main problem is what happens when people start changing their screen size. To do this I thought about setting the image as a percentage ie. 100% width and height. But I can't find how to do this in css. If anyone can give me any help I would be very greatful. My current style sheet is below if you are interested.

/* CSS Document */
body {
 background-color: #000000;
 background-image:url('interf/backgrounds/main.png');
 background-repeat: no-repeat;
 background-attachment: fixed
}

Thank you for your help.

[Dogtree]

So you want a fixed, non-repeating image, that changes size when the browser window is resized? I don't think you can do that with portable CSS.

[roryt]

I got the idea from the red hot chili peppers website www.redhotchilipeppers.com. I think they do it with javascript. To be honest I am not very familiar with javascript and unless it is cut and paste well you know what i mean. If anyone has any idea that they don't mind explaining to someone who can only understand the very basic of javascript, please respond.

Thanks for your quick response.

[peter_budo]

No, site is done in flash with combination of php and JavaScript

[roryt]

Yeah, I did notice that it was flash. I would still really appreciate any ideas. Because I am pretty sure my site will look really bad on anything apart from a 1024*768 or 1280*1024. Does anyone have any idea? Thanks for all your responses so far.

[Dogtree]

>>Because I am pretty sure my site will look really bad on anything apart from a 1024*768 or 1280*1024.
Then it has critical design flaws. If you don't design for people at lower resolutions too, your site is probably doomed to failure. At the very least, you should support a screen resolution down to 800x600.

[roryt]

At the very least, you should support a screen resolution down to 800x600.

I have done plenty of research on this factor and many huge websites (including this one) do not work on 800*600 screens. This includes sites also like Yahoo.

I do not wish to make it work on that size screen but I do at different aspect ratios and at larger size screens.

Thanks for your responses but I would really appreciate a clear answer on how to do it. By the way I am on a unix server so no asp!

[Dogtree]

I have done plenty of research on this factor and many huge websites (including this one) do not work on 800*600 screens. This includes sites also like Yahoo.

That's irrelevant. Unless you cater to high tech people who are more likely to be using a high resolution, the majority of your hits will be people who use 800x600 as the default resolution. When people are forced to side scroll, they tend to leave the site and never return. It's completely your decision, of course, but I'm not of the opinion that we can abandon 800x600 users just yet. Give it a few more years. ;)

>> but I would really appreciate a clear answer on how to do it.
Without getting into some serious Flash, you can use Javascript to test for the screen width and redirect the parent page to an appropriately designed page for that resolution.

if (screen.width < 1024) {
  parent.location.href = 'mylowrespage.html'
}

You could also do the same thing with multiple images of different sizes, since the only problem you're having seems to be the background image.

[roryt]

I can now show you my page and that may illustrate the problem slightly better. It is still in development though and the hyperlinks link back to their old site. here it is www.theunion-music.com/union_red . I would really like to stick with my css as it is working fine. I also need a answer for higher res monitors. Also due to Dogtrees advice i think i will change it so it works at 800*600. But if anyone knows a way of changing the size of my background image so that it fills the browser size I would be extremely greatful!!!!

I can now show you my page and that may illustrate the problem slightly better. It is still in development though and the hyperlinks link back to their old site. here it is www.theunion-music.com/union_red . I would really like to stick with my css as it is working fine. I also need a answer for higher res monitors. Also due to Dogtrees advice i think i will change it so it works at 800*600. But if anyone knows a way of changing the size of my background image so that it fills the browser size I would be extremely greatful!!!!

The thread here is almost the same - http://www.daniweb.com/techtalkforums/post265575.html#post265575

I think my method will work for you, however, I think your image will get distorted and will look even worse. Still you can try. I saw you're using a table for positionning, that is centered. I have not tried the method I propose, so I am not sure what will be the way the stretching will act, still you can try and give us a better idea if it worked for you.