Thread: Static Background. Dynamic foreground on web page. How?

Dear fellow members,

I am about to create a web page for my organisation. I have noticed web pages on the internet where the background - say a red brick wall template - remains immovable whilst the overlaying text, images etc. scroll over it in a sort of 2D effect. Can anyone tell me how to do this and what programme i need to use? I have everything. Adobe illustrator and photoshop. Microsoft frontpage. etc. I have tried to find this capability on Blue voda but so far i have been unsuccessful.

Any ideas?

Yours truly,
Brandr.

Here is a link to an example of what i am inquiring about.
http://www.theodora.com/new/world_maps.html

Thanx.
_Brandr.

Hi.
The only way I can think of to achieve this effect would be to use an i-frame and transparent settings. I have attained something similar although in miniature of one of my homepages (my link is below - go to Luxury Birthday Cards). For some useful guidance on using i-frames please refer to Keith's tutorial which can be found here: http://netisopen.com/computer/web/webpagestuff.html You may have to experiment a little to achieve exactly what you are after.

Originally Posted by Brandr

Dear fellow members,

I am about to create a web page for my organisation. I have noticed web pages on the internet where the background - say a red brick wall template - remains immovable whilst the overlaying text, images etc. scroll over it in a sort of 2D effect. Can anyone tell me how to do this and what programme i need to use? I have everything. Adobe illustrator and photoshop. Microsoft frontpage. etc. I have tried to find this capability on Blue voda but so far i have been unsuccessful.

Any ideas?

Yours truly,
Brandr.

I've built a test page to try it out and it works but you need to have a scroll bar - sorry it's rough, but it is only a test. http://www.girlonthehill.co.uk/tester_iframe.html

It might be acheived in a simpler way. Copy this code in the inside body tag of your page html:

bgproperties="fixed"

Originally Posted by navaldesign

It might be acheived in a simpler way. Copy this code in the inside body tag of your page html:

bgproperties="fixed"

Thanks Naval! See? Always something new to learn - even for a Major General! LOL

Always! LOL

Here is another example of the the web page i'd like to create. The bellsnwhistles background remains stationary while the foreground glides over it as you scroll down the page. I can't believe no one knows how to do this...lol
The advice so far hasn't been able to duplicate the effect, but thanx for your efforts. I appreciate it.





http://www.bellsnwhistles.com/

Best wishes.
Brandr.

The answer to your question is in post #5. It does EXCACTLY what you want to do.

Naval is the Man..............it works great.....thanks yet again Naval

Dear Sir/Madame,


I have typed: bgproperties="fixed" into the inside body tag of Html properties. The background and foreground continue to scroll as a unified body. What could i possibly be doing wrong?



Pulling my hair out in New jersey...lol

Best wishes.
_Brandr.

Please provide the URL to your page

Have you actually provided a background ????
It works great after that.

Open page properties, select background, and then choose an image for your background. then enter the code that naval has provided..

That code only works in IE. Use this one in the body which works in Firefox as well.

<STYLE TYPE="text/css">
BODY {background-image: http://www.xxxxxxxx.co.uk
(xxxxx.jpg); background-repeat:
; background-position: 0px 0px; background-attachment: fixed;}
</STYLE>

Don't forget to alter the x's to your own specs.

Thanks for all your efforts to assist me. It is greatly appreciated.
I have done as advised, to no effect. I give up. I'll create the web site without the feature.


Best wishes.
_Brandr

Don't give up....go back and read some of the tutorials, checking flash, scrolling text heads, etc. Also, use the search function top of Forums...you'll find it.

Don't give up. It does work, see here http://plusplace.co.uk/test2.html
Are you sure you are right clicking on the page then clicking on 'Page HTML' then opening and copying into the 'Inside body'

Sorry to burst your bubble mate, but the link you provided doesn't quite achieve the intended effect. When I view it on my IE browser, the text and background all move as one whole.

Originally Posted by royb

Don't give up. It does work, see here http://plusplace.co.uk/test2.html
Are you sure you are right clicking on the page then clicking on 'Page HTML' then opening and copying into the 'Inside body'

You seem to want some kind of a flash presentation. The pages you alude to seem to have flashes or maybe it's just a coincidence. If, however, you need some kind of a flash presentation, I may be able to help you.

Mapillar

Sorry to burst your bubble mate, but the link you provided doesn't quite achieve the intended effect. When I view it on my IE browser, the text and background all move as one whole.

Yep you are quite right. My humble apologies.
Try this instead

<body style="background-attachment: fixed; background-repeat: ;" background="xxxxxxxx.jpg">

http://plusplace.co.uk/test2.html

Much better...I think I am going to try that on my next project. Does that work for any picture?

Thanks for your patience and continuing input everyone.
Roy, your link features a page with exactly the effect i wish to create.

Here is what i am doing, step by step:
1) Create new page
2) Importing a textured image from my hard drive as a background. grey stucco.
3)Typing: Bgproperties="fixed" in the inside body tag
4) adding text and images.
5) previewing page in browser.


The background and foreground are still scrolling in unison.
Is it possible the effect only shows up when the page is actually published to the web?
That it does not work in preview mode? I am using IE.

All of you obviously know what you are talking about. So i have confidence i'm getting close to achieving the desired effect.

Thanks everyone.
_Brandr.

No, it also works in preview. Have you published your page yet ? if yes, provide the URL.

Originally Posted by navaldesign

It might be acheived in a simpler way. Copy this code in the inside body tag of your page html:

bgproperties="fixed"

i have used the <body bgproperties="fixed"> and it works in all browsers but firefox any ideas?
thanks so much for any help!

http://www.vodahost.com/vodatalk/blu...nd-static.html