We help IT Professionals succeed at work.

background image covers up javascript

tmonteit
tmonteit asked
on
This question is a repost of an earlier question that lacked clarity and an example.  

I have a web page with a background image and some javascript.  The problem is that my background image covers up my javascript.  When I comment out my image the javascript is visible, but the image is not.  What I want is both to be visible, but I want the javascript to display on top of the background image

I posted a live example of the page that is having issues:   See Example  


Description:
The page shows an html menu that is rendered on top of a background image.  There is some javascript based on a slider library that generates some navigation.
The image covers up the javascript generated navigation.
If you click on the "No Background" link, it brings you to a page with background removed.  Here you can see the javascript work.  But there is no image.  
I want to have both the image and the sliders to work on top of the image.
Also I want to sliders to appear directly to the right of the html menu.

How can I make this work properly?   Perhaps a way to send the background image to the bottom most layer?   Very basic examples please.

Thanks all for your help!
Comment
Watch Question

Commented:
add style="z-index: -1;" to the image
Take a look into this description

http://www.w3schools.com/cssref/pr_pos_z-index.asp

change the Image z-Index and try wiht the smple in the link
Top Expert 2013

Commented:
This:

<body>
<img src="images/mockup_slim.jpg" id="bg" alt=""> 


<ul id="menu">

Open in new window

is not a background image.

If you want it as a background, then set it as the background in the CSS and get rid of the img tag.


Cd&