June 12, 200818 yr I have created a page using html & css which has an image over the entire background, and I am trying to lay a swf movie over the background pic using dreamweaver. When I insert the movie it drops it below ( at the bottom of the page ) rather than overlaying it on top of the background image. how can I reposition it? please help html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <link rel="stylesheet" type="text/css" href="scrollbar.css" /> <title>website</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script> </head> <body> <div id="container"> <div class="imageholder2"><img src="pics/Backgroundblank.jpg" width="800" height="600" border="0" usemap="#buttons"/> <map name="buttons" id="buttons"> <area shape="rect" coords="328,77,398,90" href="index.html" target="_self" alt="shows" /> <area shape="rect" coords="421,78,484,89" href="music.html" target="_self" alt="music" /> <area shape="rect" coords="506,78,563,90" href="biog.html" target="_self" alt="band" /> <area shape="rect" coords="586,79,682,89" href="gallery.html" target="_self" alt="gallery" /> <area shape="rect" coords="705,78,768,89" href="links.html" target="_self" alt="links" /> </map> <script type="text/javascript"> AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','800','height','450','src','randomAs2','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','randomAs2' ); //end AC code </script><noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="800" height="450"> <param name="movie" value="../Ghost Town Showdown/randomAs2.swf" /> <param name="quality" value="high" /> <embed src="randomAs2.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="800" height="450"></embed> </object> </noscript> </body> </div> </html> css: @charset "utf-8"; body{ margin: 0px; colour: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; /*or any other font family you prefer*/ font-size: 12px; background-color: #000000; background-repeat: no-repeat; } /* CSS Document */ #container { margin: 0 auto; width: 800px; position: relative; top: 15px; bottom:15px } #imageholder{ /*This will be the holder which will hold our page image(i.e. coffee.jpg) */ position:absolute; width:800px; /*Width of Image*/ height:5600px; /*Height of Image*/ left:376px; /* This is applied relative to edge of container */ top:0px; background-image: url(backgroundfull.jpg); } #imageholder2{ /*This will be the holder which will hold our page image(i.e. coffee.jpg) */ position:absolute; width:800px; /*Width of Image*/ height:5600px; /*Height of Image*/ left:376px; /* This is applied relative to edge of container */ top:0px; background-image: url(pics/backgroundblank.jpg); background-color: #000000; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; z-index: 1; } #links { color:#660000; } .darkblue A:link{ color:#660000 } .darkblue A:visited{ color:#990000 } .darkblue A:active{ color:#000099 } #navbar { position: absolute; top: 250px; left: 400px; z-index: 1; } #scrollbarbox { top: 130px; left: 410px; height: 400px; width: 300px; overflow: auto; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: justify; position: absolute; color: #660000; padding-right: 12px; } #scrollbarbox2 { top: 130px; left: 150px; height: 395px; width: 490px; overflow: auto; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-align: left; position: absolute; color: #660000; padding-right: 18px; } #textbox { position: absolute; top: 505px; left: 75px; height: auto; width: 200px; color: #660000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; font-style: normal; text-align: center; }
June 12, 200818 yr You need to put the background image as a class in your CSS body class and not show it as an HTML image. body {background: pics/Backgroundblank.jpg}
June 12, 200818 yr Author Thanks for that - it works. Although now my 'button' maps don't work & also the background isnt centering in the browser window. Also forgot to mention that each page is having a diferent background pic. If i put it in the css body wont it stay on every page? Sorry if these seem like stupid questions, but this is my first website...
Create an account or sign in to comment