Site Layout and Usability

Css Fixed Background Attachment

Please support our Site Layout and Usability advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Oct 2005

Posts: 1,283

Reputation: roryt will become famous soon enough

Solved Threads: 14

roryt

Offline

Nearly a Posting Virtuoso

Css Fixed Background Attachment

Jul 14th, 2006

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.

Help with Code Tags

(Toggle Plain Text)

/* 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.

PhotoShopthis
FlyingPen
If I have helped you please add to my reputation

•

Join Date: May 2005

Posts: 232

Reputation: Dogtree is an unknown quantity at this point

Solved Threads: 3

Dogtree

Offline

Posting Whiz in Training

Re: Css Fixed Background Attachment

Jul 14th, 2006

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.

•

Join Date: Oct 2005

Posts: 1,283

Reputation: roryt will become famous soon enough

Solved Threads: 14

roryt

Offline

Nearly a Posting Virtuoso

Re: Css Fixed Background Attachment

Jul 14th, 2006

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.

Last edited by roryt; Jul 14th, 2006 at 12:34 pm.

PhotoShopthis
FlyingPen
If I have helped you please add to my reputation

•

Join Date: Dec 2004

Posts: 4,279

Reputation: peter_budo has much to be proud of

Solved Threads: 494

peter_budo peter_budo is offline

Offline

Code tags enforcer

Re: Css Fixed Background Attachment

Jul 15th, 2006

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

Learn to see in another's calamity the ills which you should avoid.
Publilius Syrus
(~100 BC)
LJC - London Java Community, Graduate & Undergraduate Software Development Community, JAVAWUG (Java Web User Group), The London Android Group

•

Join Date: Oct 2005

Posts: 1,283

Reputation: roryt will become famous soon enough

Solved Threads: 14

roryt

Offline

Nearly a Posting Virtuoso

Re: Css Fixed Background Attachment

Jul 16th, 2006

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.

PhotoShopthis
FlyingPen
If I have helped you please add to my reputation

•

Join Date: May 2005

Posts: 232

Reputation: Dogtree is an unknown quantity at this point

Solved Threads: 3

Dogtree

Offline

Posting Whiz in Training

Re: Css Fixed Background Attachment

Jul 16th, 2006

>>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.

•

Join Date: Oct 2005

Posts: 1,283

Reputation: roryt will become famous soon enough

Solved Threads: 14

roryt

Offline

Nearly a Posting Virtuoso

Re: Css Fixed Background Attachment

Jul 17th, 2006

[quote=DogtreeAt the very least, you should support a screen resolution down to 800x600.[/quote]

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!

PhotoShopthis
FlyingPen
If I have helped you please add to my reputation

•

Join Date: May 2005

Posts: 232

Reputation: Dogtree is an unknown quantity at this point

Solved Threads: 3

Dogtree

Offline

Posting Whiz in Training

Re: Css Fixed Background Attachment

Jul 17th, 2006

•

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.

Help with Code Tags

(Toggle Plain Text)

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.

•

Join Date: Oct 2005

Posts: 1,283

Reputation: roryt will become famous soon enough

Solved Threads: 14

roryt

Offline

Nearly a Posting Virtuoso

Re: Css Fixed Background Attachment

Jul 17th, 2006

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!!!!

PhotoShopthis
FlyingPen
If I have helped you please add to my reputation

•

Join Date: Oct 2006

Posts: 232

Reputation: Rhyan is an unknown quantity at this point

Solved Threads: 24

Rhyan

Offline

Posting Whiz in Training

Re: Css Fixed Background Attachment

#10

Oct 20th, 2006

•

Originally Posted by 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!!!!

The thread here is almost the same - http://www.daniweb.com/techtalkforum...tml#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.