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 Quote Link to comment 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> Quote Link to comment 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 Quote Link to comment 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 Quote Link to comment 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. Quote Link to comment 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 Quote Link to comment 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 Quote Link to comment 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? Quote Link to comment 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 Quote Link to comment 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"> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.