943,600 Members | Top Members by Rank

Ad:
Jul 14th, 2006
0

Css Fixed Background Attachment

Expand Post »
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.
Similar Threads
Reputation Points: 178
Solved Threads: 15
Nearly a Posting Virtuoso
roryt is offline Offline
1,282 posts
since Oct 2005
Jul 14th, 2006
0

Re: Css Fixed Background Attachment

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.
Reputation Points: 35
Solved Threads: 3
Posting Whiz in Training
Dogtree is offline Offline
232 posts
since May 2005
Jul 14th, 2006
0

Re: Css Fixed Background Attachment

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.
Reputation Points: 178
Solved Threads: 15
Nearly a Posting Virtuoso
roryt is offline Offline
1,282 posts
since Oct 2005
Jul 15th, 2006
0

Re: Css Fixed Background Attachment

No, site is done in flash with combination of php and JavaScript
Moderator
Featured Poster
Reputation Points: 2786
Solved Threads: 871
Code tags enforcer
peter_budo is offline Offline
6,653 posts
since Dec 2004
Jul 16th, 2006
0

Re: Css Fixed Background Attachment

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.
Reputation Points: 178
Solved Threads: 15
Nearly a Posting Virtuoso
roryt is offline Offline
1,282 posts
since Oct 2005
Jul 16th, 2006
0

Re: Css Fixed Background Attachment

>>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.
Reputation Points: 35
Solved Threads: 3
Posting Whiz in Training
Dogtree is offline Offline
232 posts
since May 2005
Jul 17th, 2006
0

Re: Css Fixed Background Attachment

[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!
Reputation Points: 178
Solved Threads: 15
Nearly a Posting Virtuoso
roryt is offline Offline
1,282 posts
since Oct 2005
Jul 17th, 2006
0

Re: Css Fixed Background Attachment

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.
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.
Reputation Points: 35
Solved Threads: 3
Posting Whiz in Training
Dogtree is offline Offline
232 posts
since May 2005
Jul 17th, 2006
0

Re: Css Fixed Background Attachment

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!!!!
Reputation Points: 178
Solved Threads: 15
Nearly a Posting Virtuoso
roryt is offline Offline
1,282 posts
since Oct 2005
Oct 20th, 2006
0

Re: Css Fixed Background Attachment

Click to Expand / Collapse  Quote 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.
Reputation Points: 21
Solved Threads: 26
Posting Whiz in Training
Rhyan is offline Offline
240 posts
since Oct 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in Site Layout and Usability Forum Timeline: Need Help with adobe Golive
Next Thread in Site Layout and Usability Forum Timeline: CSS - strech a background image?





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC