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.