usawh Posted May 20, 2008 Share Posted May 20, 2008 I was just looking at at website where the middle scrolls. I was wandering how do they do that. Can you please give an example.Here is the site http://www.to-hawaii.com Thanks Link to comment https://forums.phpfreaks.com/topic/106516-how-do-they-do-that/ Share on other sites More sharing options...
rhodesa Posted May 20, 2008 Share Posted May 20, 2008 <style type="text/css"> body { background-attachment:fixed; background-image:url(background_image.jpg); } </style> Link to comment https://forums.phpfreaks.com/topic/106516-how-do-they-do-that/#findComment-545999 Share on other sites More sharing options...
usawh Posted May 20, 2008 Author Share Posted May 20, 2008 Hi Aaron, Thank you very much regards, usawh Link to comment https://forums.phpfreaks.com/topic/106516-how-do-they-do-that/#findComment-546136 Share on other sites More sharing options...
usawh Posted May 20, 2008 Author Share Posted May 20, 2008 Hi, I tired the code and it works fine but just a few things I notices about the page. 1. The image seems to repeat itself on the page how do I just show one image ? 2. The image loads and then the text. How do I load both at the same time Thanks Link to comment https://forums.phpfreaks.com/topic/106516-how-do-they-do-that/#findComment-546152 Share on other sites More sharing options...
haku Posted May 21, 2008 Share Posted May 21, 2008 1) Background-image:url(background_image.jpg) no-repeat; 2) You can't. Well actually I suppose you could by moving the link to your stylesheet to the bottom of your page, but none of the styles would be loaded until that point, not just the background image. Or you could have the declarations for that one element is a separate stylesheet and put that after the element. Link to comment https://forums.phpfreaks.com/topic/106516-how-do-they-do-that/#findComment-546231 Share on other sites More sharing options...
rhodesa Posted May 21, 2008 Share Posted May 21, 2008 If you are waiting for the background image to load, then you need to work on optimizing the image. It should be less then 100k...the page you pointed at for instance is under 50k Link to comment https://forums.phpfreaks.com/topic/106516-how-do-they-do-that/#findComment-546281 Share on other sites More sharing options...
usawh Posted May 25, 2008 Author Share Posted May 25, 2008 Hi Thanks for the code <style type="text/css"> body { background-attachment:fixed; background-image:url(background_image.jpg); } </style> I have 10 different images how do I get the background to rotate to a different image when someone go to a different page or refresh the browser ? regards, usawh Link to comment https://forums.phpfreaks.com/topic/106516-how-do-they-do-that/#findComment-549755 Share on other sites More sharing options...
haku Posted May 25, 2008 Share Posted May 25, 2008 Do you know a server-side scripting language? Link to comment https://forums.phpfreaks.com/topic/106516-how-do-they-do-that/#findComment-549848 Share on other sites More sharing options...
usawh Posted May 26, 2008 Author Share Posted May 26, 2008 Hi I learning php now. can I do it in regular html ? regards, usawh Link to comment https://forums.phpfreaks.com/topic/106516-how-do-they-do-that/#findComment-549998 Share on other sites More sharing options...
rhodesa Posted May 26, 2008 Share Posted May 26, 2008 Step 1) in your CSS, leave the generic part: body { background-attachment:fixed; } you can specify a background-image in the above code, and it will be the default image if you don't specify an alternate Step 2) on each page, modify your body tag to have some inline CSS: <body style="background-image:url(bg_home.jpg);"> an alternate to step 2 (and my preferred method) is to use a class on each body tag that you want different. So, in your CSS: body { background-attachment:fixed; } body.home { background-image:url(bg_home.jpg); } body.about { background-image:url(bg_about.jpg); } then on your pages, use the class you want: <body class="about"> Link to comment https://forums.phpfreaks.com/topic/106516-how-do-they-do-that/#findComment-550389 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.