Transparent Scrolling Foreground

[daydreemer]

Can anyone please point me in the right direction to a tutorial, or info on how to achieve the scrolling foreground effect, with the transparent elements like on the Paul Wallace site:

http://www.paul-wallas.co.uk/

Thanks
Steve

[Spunkmeyer]

Hey,

The background image effect was achieved by adding: "background:url(images/bg.jpg) top center fixed no-repeat;" to his css. The "fixed" position indicates that the background is static.

The content boxes simply have a transparent background on them along with what seems to be another layer on top that was probably filled-black and had it’s opacity lowered (these two layers are part of the image… no css was used). It was then saved as .png which uses alpha transparency to make it look all shiny, but unfortunately isn’t really supported by ie that well – ie7 is alright at it, but ie6 sucks.

Anyways, that’s what it looks like to me. Hope this helps.

[JohRid]

Steve,

I have another solution. Not by CSS but by using javascripting. When used, it places an image in your background. And no matter the size of your windoe, it will fill it up.

First create a file like "fixedbackground.js" by using notepad or any other editor. This file should contain:

Code:

var backgroundset = false;
function fixedBackground(url) {
if(!backgroundset) {
document.body.style.overflow = ‘hidden’;
document.body.style.padding = ‘0px’;
document.body.style.margin = ‘0px’;
var overlay = document.createElement(‘DIV’);
overlay.style.position = ‘absolute’;
overlay.style.top = ‘0px’;
overlay.style.left = ‘0px’;
overlay.style.height = ‘100%’;
overlay.style.width = ‘100%’;
overlay.style.overflow = ‘auto’;
overlay.innerHTML = document.body.innerHTML;
document.body.innerHTML = ‘‘;
document.body.appendChild(overlay);
backgroundset = true;
}
else background.src = url;
}

Next, in the head section of your htm-file (or asp, or php, or whatever), place the followoing code:

Code:

In your htm-file (or whatever), your body-tag should contain an onload like:

Code:

onload=”fixedBackground(‘background.JPG’); (any other image-file will do)

That’s it.

If you are using frames, you have to do this for every document in that frame. That’s a lot of work because you have to cut up your image in images for every frame you use.
If you change to iframes, then it is a lot easier. Every line for a iframe should contain "allowtransparency" like:

Code:

Every document loaded in the iframe needs some extra coding to. In the head-section you need:

Code:

Don’t assign any background in you body-section!

If you wan’t to see an example, visit http://publiek.serverthuis.nl. Play around with the window and see the effect.

[Author]

Posts