0

So I have this site here http://jamessuske.com/freelance/seasons/

and as you can see the background is the full and there will be a different background for each page.

So in my index.php I have this code:

<?php include('include/header.php'); ?>
<img src="images/index.png" id="bg" class="bgwidth">

In my header.php file I have this:

<div class="sitebar">
<ul>
<li><a href="#">Site One</a></li>
<li><a href="#">Site Two</a></li>
</ul>
</div><!--sitebar-->

But I cant see the sitebar div at all: below is my css

body{
    background-color:#000;
    margin:0;
    padding:0;
}

#bg { 
    position: fixed; 
    top: 0; 
    left: 0; 
}

.bgwidth { 
    width: 100%; 
}

.bgheight { 
    height: 100%; 
}

.sitebar{
    position:relative;
    width:100%;
    background-color:#000;
    height:30px;
}

and I tried setting z-index of 1000 on sitebar and 999 on background, but that didn't work.

So I am guess this may not be the best way to have background at full screen as anything else I put on the page doesn't appear. Any suggestions?

Here is some jQuery that helped get the background at full screen..

<script type="text/javascript">
$(window).load(function() {    

    var theWindow        = $(window),
        $bg              = $("#bg"),
        aspectRatio      = $bg.width() / $bg.height();

    function resizeBg() {

        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg
                .removeClass()
                .addClass('bgheight');
        } else {
            $bg
                .removeClass()
                .addClass('bgwidth');
        }

    }

    theWindow.resize(resizeBg).trigger("resize");

});
</script>

If I put the sidebar below the image and set the position to relative that works, but I would prefer to have the sitebar above the image.

4

1 回答 1

1

将此添加到您的CSS

.sitebar {position:absolute; z-index:999;}
于 2013-07-19T16:11:02.907 回答