CODEWITHSUNDEEP
javascripthtmlcss
John McPherson
John McPherson

Reputation: 43

Making an HTML file a CSS background - possible?

I've been making a site for a friend, basically I used a tutorial to make a background that rotates the images. Saves me using GIF's that loose image colour. Anyway, here's the problem: I made it work as a background and made it appear behind the nav, but when I do the nav is inactive (e.g. despite the images appearing behind the nav, it registers as being infront of it, so you can't click anything) and whenever the image fades out into a new one the nav disappears and reappears over the new image. I played with the z-index but no joy whatsoever, very confused.

I know these things can be awkward to explain, so here, have yourself a test server!!!

http://78.47.244.67/John/index.php

This at least shows what happens, I can also provide the code:

Here is the code for the background, image rotation in CSS, HTML and Javascript: 

<html>
    <head>
        <style type="text/css">
            body {
                color:#000;
                background-color:#000;
            }
        </style>

        <style type="text/css">
            div.rotator {
                position:relative;
                display:none;
            }

            div.rotator ul li {
                float:left;
                position:absolute;
                list-style: none;
                margin:0px;
                padding:0px;
            }

            div.rotator ul li img {
                width:1600px;
                height:780px;
                margin:0px;
                padding:0px;
            }

            div.rotator ul li.show {
                z-index:-500;
            }
        </style>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

        <script type="text/javascript">
            function theRotator() {
                $('div.rotator ul li').css({opacity: 0.0});
                $('div.rotator ul li:first').css({opacity: 1.0});
                setInterval('rotate()',6000);
            }

            function rotate() { 
                var current = ($('div.rotator ul li.show')?  $('div.rotator ul li.show') : $('div.rotator ul li:first'));
                if(current.length == 0) current = $('div.rotator ul li:first');
                var next = ((current.next().length) ? ((current.next().hasClass('show')) ? 
                $('div.rotator ul li:first') :current.next()):$('div.rotator ul li:first'));
                //Un-comment the 3 lines below to get the images in random order
                var sibs = current.siblings();
                var rndNum = Math.floor(Math.random() * sibs.length );
                var next = $( sibs[ rndNum ] );
                //Set the fade in effect for the next image, the show class has higher z-index
                next.css({opacity: 0.0})
                .addClass('show')
                .animate({opacity: 1.0}, 1000);
                current.animate({opacity: 0.0}, 1000)
                .removeClass('show');
            };

            $(document).ready(function() {      
                theRotator();
                $('div.rotator').fadeIn(1000);
                $('div.rotator ul li').fadeIn(1000);
            });
        </script>
    </head>

    <body>
        <div class="rotator">
            <ul>
                <li class="show"><img src="img/trackbike.jpg"/></li>
                <li><img src="img/trackcar.jpg"/></li>
                <li><img src="img/drifting.jpg"/></li>
                <li><img src="img/mtb.jpg"/></li>
                <li><img src="img/wildlife.jpg"/></li>
            </ul>
        </div>
    </body>
</html>

Here is the CSS code for the navigation:

#sideNav {
    width:270px;
    height:900px;
    float:left;
    background-color: rgba(0, 0, 0, 0.5);
    z-index:500;
}

#sideNav img {
    padding-left:65px;
    padding-top:120px;
    padding-bottom:100px;
}

#sideNav a {
    padding-left:65px;
    color:#CCC;
    text-decoration:none;
    font: 28px Verdana, Geneva, sans-serif;
}

#sideNav li a:hover,
#sideNav li.current-page a {
    color:#ffc600;
}

#sideNav p a {
    float:right;
    font:10px Verdana, Geneva, sans-serif;
    color:#fff;
    text-decoration:none;
}

#sideNav p a:hover {
    color:#ffc600;
}

#sideNav p {
    font-size:10px;
    color:#FFF;
    padding-top:100px;
    padding-left:62px;
    width:120px;
}

Anyone able to come up with a why? Or better yet a solution? I'm stumped :/

Any help is much appreciated,

Ta, John

Upvotes: 1

Views: 293

Answers (1)

freethejazz
freethejazz

Reputation: 2285

Why? Dunno, but if you add

z-index: -1

to the rotator class, hovering looks like it works as you want it to.

Upvotes: 2

Related Questions