•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the Site Layout and Usability section within the Web Development category of DaniWeb, a massive community of 428,288 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,646 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our Site Layout and Usability advertiser: Programming Forums
Views: 3733 | Replies: 9
 |
•
•
Join Date: Oct 2005
Location: Northampton UK
Posts: 1,142
Reputation: 
Rep Power: 7
Solved Threads: 9
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.
Thank you for your help.
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.
•
•
Join Date: May 2005
Posts: 232
Reputation:
Rep Power: 4
Solved Threads: 2
Posting Whiz in Training
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
Location: Northampton UK
Posts: 1,142
Reputation:
Rep Power: 7
Solved Threads: 9
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.
Thanks for your quick response.
Last edited by roryt : Jul 14th, 2006 at 11:34 am.
•
•
Join Date: Dec 2004
Location: London or Slovakia
Posts: 2,469
Reputation:
Rep Power: 11
Solved Threads: 296
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)
If we helped you to solve your problem, answered your question please mark your post as SOLVED.
Publilius Syrus
(~100 BC)
If we helped you to solve your problem, answered your question please mark your post as SOLVED.
•
•
Join Date: Oct 2005
Location: Northampton UK
Posts: 1,142
Reputation:
Rep Power: 7
Solved Threads: 9
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.
•
•
Join Date: May 2005
Posts: 232
Reputation:
Rep Power: 4
Solved Threads: 2
Posting Whiz in Training
>>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.
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
Location: Northampton UK
Posts: 1,142
Reputation:
Rep Power: 7
Solved Threads: 9
[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!
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!
•
•
Join Date: May 2005
Posts: 232
Reputation:
Rep Power: 4
Solved Threads: 2
Posting Whiz in Training
•
•
•
•
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.
>> 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'
} •
•
Join Date: Oct 2005
Location: Northampton UK
Posts: 1,142
Reputation:
Rep Power: 7
Solved Threads: 9
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!!!!
•
•
Join Date: Oct 2006
Location: Sofia, Bulgaria
Posts: 135
Reputation:
Rep Power: 2
Solved Threads: 7
Junior Poster
•
•
•
•
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.
|
•
•
•
•
•
•
•
•
DaniWeb Site Layout and Usability Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
Similar Threads
- CSS Fixed Background (HTML and CSS)
Other Threads in the Site Layout and Usability Forum
- Previous Thread: Need Help with adobe Golive
- Next Thread: CSS - strech a background image?
