Hi everyone, I have a simple question. I have an index with background and a video player...I want to change places of the background and the video.

How to make the background to be on top of the video not like now the video to be on top. I just want to make it more realistic because when I put it behind the picture I can cut a square in the picture where the video will be and the flames will be more realistic. My code for now is

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html lang="en"> 

<style type="text/css"> 
body { 
background-position:center top;
background-size: 100%



<br /><br /><br /><br /><br /><br /><br />

<script type='text/javascript' src='jwplayer.js'></script>

<div id='mediaspace'>This text will be replaced</div>

<script type='text/javascript'>
    'flashplayer': 'player.swf',
    'duration': '22',
    'file': 'intro.flv',
    'image': 'flame.jpg',
    'volume': '80',
    'controlbar': 'none',
    'autostart': 'true',
    'icons': 'true',
    'stretching': 'none',
    'width': '430',
    'height': '305'
<a class="skippy" href="http://www.thedarknessbg.com/index.php" ><img src="http://www.housefm.net/SkipButton.gif" /></a>

Thanks in advance :)

Ok first use margin:0 auto; for centering an element and then search on google for z-index that should solve your problems

Cool...but I dont know how to make it...even after using z-index the video doesnt want to go behind the image :@

Flash has some less known quirks and does not actually open inside the current window instead it creates a new one and that automatically gets put on top by the browser. This is why it does not appear to obey z-index settings. There's a documented workaround here but it may be out of date for the current generation of web browsers.

The alternative would be to use the Flash file to create an animated jpg with the aid of javascript.