Member Avatar for bulqr4eto

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.
http://thedarknessbg.com/intro2/

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"> 
<head> 


<style type="text/css"> 
body { 
   background-color:#000000; 
background-image:url(flame.jpg); 
background-repeat:no-repeat;
background-position:center top;
background-size: 100%
 } 




</style> 

</head> 
<body> 

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


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

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

<script type='text/javascript'>
  jwplayer('mediaspace').setup({
    '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'
  });
</script>
</center>
<a class="skippy" href="http://www.thedarknessbg.com/index.php" ><img src="http://www.housefm.net/SkipButton.gif" /></a>
</div> 
</body> 
</html>

Thanks in advance :)

  • 3 Contributors
  • 3 Replies
  • 269 Views
  • 1 Hour Discussion Span
  • Latest Post Latest Post by Sogo7
Member Avatar for dany12

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

Member Avatar for bulqr4eto

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

Member Avatar for Sogo7

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.

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.