Member Avatar for mcld

Hi guys,
I was just wondering how pages like this are made example http://uk.msn.com
what I mean is the image or swf behind, that does not scroll when the actual page content scrolls. Pls any pointer as to how to achieve this kind of effect will be appreciated.
Thanks

  • 3 Contributors
  • 7 Replies
  • 111 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by mcld
Member Avatar for almostbob

set in css, for simple items as background,
for complex items as css z-index layers not as background, because background at the moment cant play animations, or do much other than sit there
but examine the z-index property, default z-index is 0
higher z-index sits above,
lower z-index sits below in the page
so if you style an element

element {z-index:-100; position:fixed; top:somethingX; bottom:somethingY;}

it will sit at position somethingX,somethingY behind other content, while the rest of the page scrolls,
"element" can be a player, image, div, pretty much anything

Edited by almostbob because: n/a
Member Avatar for mcld

thank you very much almostbob..
I tried

body{

    height:100%;
    background-repeat:no-repeat;
    background:url(bg/myflash.swf) center;
    z-index:-1; position:fixed; top:10px; bottom:20px;
    
}

but no luck, is there something I did not get?
pls help.

Member Avatar for almostbob

yes, something nobody ever gets, until the second time, then its a 'headslap moment' 'how did I miss that' do not use the background property of the body, background does not do much
the z-index example above allows you to do it with a positioned div,p,player,any element

"simple items as background"

"complex items as css z-index layers not as background, because background at the moment cant play animations, or do much other than sit there"

give your swf player the css in the example should (fingers_X) work

Edited by almostbob because: n/a
Member Avatar for mcld

sorry almostbob, but I do not understand "give your swf player the css in the example should (fingers_X) work " how, if i use a DIV with alower z-index like

<div id="myswfbg"></div> were css is 
myswgbg{
    height:100%;
    background-repeat:no-repeat;
    background:url(bg/myflash.swf) center;
    z-index:-1; position:fixed; top:10px; bottom:20px;
}

the bg content will scroll. so how do I get this.?

Member Avatar for almostbob

in the example there is no reference to background,
the background property does not do what you intend, probably supposed to, but,,,
background is static and does not play swf or animation or vid

you are, in essence, faking it
create an ordinary player element and give it style that makes the player sit behind other content and fixed PLAYERelement {z-index:-100; position:fixed; left:somethingX; top:somethingY;} where the element id='PLAYERelement' is whatever code it would require to embed the swf in the page

something along the lines of

<dtd>
<html>
<head>
<style type='text/css'>
PLAYERelement {z-index:-100; position:fixed; left:somethingX; top:somethingY;}
</style>
</head>
<body>
<div id='PLAYERelement'><!-- code to embed .swf --></div>
<div> bla bla bla rest of page
bla bla bla</div>
</body></html>

the rest of the bla bla bla should scroll over the embedded player, which has the appearrance of a background
couldnt be bothered looking up the swf player code, likely the player itself can be given the id and styled without requiring the enclosing <div>

Edited by almostbob because: n/a
Member Avatar for mcld

Thanks man

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.