Member Avatar for mcld

Hi guys,
I was just wondering how pages like this are made example
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
  • 118 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by mcld

Dani AI

Generated

Short summary and best practice, building on and :

is correct that background-attachment: fixed is the simple route for a static image that should not scroll. For animated media (Flash back then, now video/canvas), the background-image approach does not start a player and will not behave like a running animation. is also on the right track: place the media in its own fixed layer, not as a CSS background.

Practical pattern (safe, modern, and cross-browser): put a dedicated fullscreen container as the first child of <body>, make it position: fixed so it stays put, and layer page content above it with a higher stacking order. Keep the background element from intercepting clicks with pointer-events: none. For video backgrounds use autoplay muted loop playsinline and object-fit: cover so the media fills the viewport without letterbox.

<body>
  <div id="bg">
    <video autoplay muted loop playsinline>
      <source src="bg.mp4" type="video/mp4">
    </video>
  </div>

  <main id="content">…</main>
</body>

#bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#bg video { width: 100%; height: 100%; object-fit: cover; }
#content { position: relative; z-index: 1; background: transparent; }

Troubleshooting and gotchas: negative z-index can push the layer behind the page background and make it invisible in some browsers; preferred approach is a low non-negative z-index for the background and explicit higher z-index for content. Ancestor transforms or opacity create stacking contexts that change layering—place the background as a direct child of body to avoid surprises. Flash required the wmode parameter (opaque/transparent) to allow HTML layering, but Flash is now obsolete—prefer HTML5 video or CSS/canvas solutions. Finally, mobile devices often disable fixed backgrounds or throttle animations for performance; include a lightweight fallback via media queries.

Recommended Answers

All 7 Replies

Member Avatar for Arkinder

Have a look at the .

Regards, Arkinder

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.