37 users online (1 members and 36 guests)  


  Results 1 to 3 of 3

Related

  1. Replies: 3
  2. background image    Forum: HTML Forum
    Replies: 9
  3. td background image    Forum: CSS Forum
    Replies: 3
  4. Can't get image to set as background    Forum: HTML Forum
    Replies: 4
  1. #1
    angelopcs's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2008
    Posts
    2

    Menu over background image

    I can't get a menu to show up over a background image. I like use the code :
    <div>
    <img id="background" src="NewLrider.jpg" alt="" title="" />
    </div>
    to display the image, because it covers the whole page, grows, shrinks, etc.
    But everything I've tried ends up under the background. I have a sample javascript menu I want to use, but even simple href items get overwritten?
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "">
    <html xmlns="" xml:lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title> Low Riders MC, LTD </title>
    <meta name="Author" content="Angelo White" />
    <meta name="Keywords" content="motorcycles, bikes" />
    <meta name="Description" content="Low Riders Nashville" />
    <meta http-equiv="imagetoolbar" content="no" />
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <link rel="icon" href="../favicon.ico" type="image/ico" />
    <style type="text/css">
    html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
    body {font-family:verdana, arial, sans-serif; font-size:76%;}
    #background{position:absolute; z-index:1; width:100%; height:100%;}
    #scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
    #content {padding:5px 300px 20px 200px;}
    p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
    #fixed {position:absolute; top:25px; left:10px; width:150px; z-index:10; color:#567; border:1px solid #000;
    padding:10px;}
    </style>

    <SCRIPT language=javascript>
    // Courtesy of SimplytheBest.net -
    <!--
    function on(img)
    {
    if (!document.images) return;
    document.images[img].src = "images/dynamic1.gif";
    setTimeout ('document.images["'+img+'"].src = "images/dynamic2.gif";', 50);
    setTimeout ('document.images["'+img+'"].src = "images/dynamic3.gif";', 100);
    setTimeout ('document.images["'+img+'"].src = "images/dynamic4.gif";', 150);
    setTimeout ('document.images["'+img+'"].src = "images/dynamic5.gif";', 200);
    setTimeout ('document.images["'+img+'"].src = "images/'+img+'_over.gif";', 250);
    }
    function off(img)
    {
    if (!document.images) return;
    document.images[img].src = "images/dynamic5.gif";
    setTimeout ('document.images["'+img+'"].src = "images/dynamic4.gif";', 50);
    setTimeout ('document.images["'+img+'"].src = "images/dynamic3.gif";', 100);
    setTimeout ('document.images["'+img+'"].src = "images/dynamic2.gif";', 150);
    setTimeout ('document.images["'+img+'"].src = "images/dynamic1.gif";', 200);
    setTimeout ('document.images["'+img+'"].src = "images/'+img+'_default.gif";', 250);
    }
    //-->
    </SCRIPT>
    <script language="javascript">
    // Courtesy of SimplytheBest.net -
    <!--
    var imgslist = new Array(
    "images/dynamic1.gif",
    "images/dynamic2.gif",
    "images/dynamic3.gif",
    "images/dynamic4.gif",
    "images/dynamic5.gif",
    "images/image1_over.gif",
    "images/image2_over.gif",
    "images/image3_over.gif",
    "images/image4_over.gif",
    "images/image5_over.gif",
    "images/image6_over.gif"
    );
    var imgs=new Array();
    if (document.images)
    for (x=0; x<imgslist.length; x++)
    {imgs[x]=new Image(); imgs[x].src = imgslist[x];}
    //-->
    </script>
    <div>
    <img id="background" src="NewLrider.jpg" alt="" title="" />
    </div>
    </head>
    <body>
    <table bgcolor="#FFFFFF" border="0" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
    <tbody>
    <tr>
    <td bgcolor="#FFFFFF"><a onmouseout="off('image1');" onmouseover="on('image1');" href="<A href="http://planmagic.com/business_planning.html"><img">http://planmagic.com/business_planning.html"><img border="0" name="image1" src="images/image1_default.gif"></a></td>
    </tr>
    <tr>
    <td bgcolor="#FFFFFF"><a onmouseout="off('image2');" onmouseover="on('image2');" href="<A href="http://planmagic.com/marketing_planning.html"><img">http://planmagic.com/marketing_planning.html"><img border="0" name="image2" src="images/image2_default.gif"></a></td>
    </tr>
    <tr>
    <td bgcolor="#FFFFFF"><a onmouseout="off('image3');" onmouseover="on('image3');" href="<A href="http://planmagic.com/webquest.html"><img">http://planmagic.com/webquest.html"><img border="0" name="image3" src="images/image3_default.gif"></a></td>
    </tr>
    <tr>
    <td bgcolor="#FFFFFF"><a onmouseout="off('image4');" onmouseover="on('image4');" href="<A href="http://planmagic.com/financial_planning.html"><img">http://planmagic.com/financial_planning.html"><img border="0" name="image4" src="images/image4_default.gif"></a></td>
    </tr>
    <tr>
    <td bgcolor="#FFFFFF"><a onmouseout="off('image5');" onmouseover="on('image5');" href="<A href="http://planmagic.com/download.html"><img">http://planmagic.com/download.html"><img border="0" name="image5" src="images/image5_default.gif"></a></td>
    </tr>
    <tr>
    <td bgcolor="#FFFFFF"><a onmouseout="off('image6');" onmouseover="on('image6');" href="<A href="http://planmagic.com/register.html"><img">http://planmagic.com/register.html"><img border="0" name="image6" src="images/image6_default.gif"></a></td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>

  2. #2
    angelopcs's Avatar
    New User

    Status
    Offline
    Join Date
    Mar 2008
    Posts
    2

    Re: Menu over background image

    I figured this problem out. I just had to add a line to the css style section in the header:
    #content {padding:1px 50px 10px 10px; position:relative; z-index:1;}

    Thanks for the responses, even though I couldn't figure out how to view them.

  3. #3
    HTML's Avatar
    Administrator

    Status
    Offline
    Join Date
    Aug 2000
    Posts
    3,445

    Follow HTML On Twitter Add HTML on Facebook Add HTML on Google+ Add HTML on Linkedin Visit HTML's Youtube Channel

    Re: Menu over background image

    Happy to hear you got this resolved .

    Sadly, the only response was spam that had nothing to do with your issue.

    Dave
    AHFBWEB Less customers per server, more power for you!

    Business Class Shared Hosting



Tags for this Thread