I am looking to create a fixed bar that is off-center with a scrolling background. The code I have so far either places the bar on the surface but fixes it to the background, or it positions the bar beneath the image and fixes it to the window - neither of which is what I want. I can't seem to keep the "contentBox" on the surface of the window. Any help would be appreciated (and apologies for the messy code, as this is my first attempt at CSS).
<html>
<head>
<style type="text/css">
body{ height:100%}
#bg {
position:absolute;
background-color:grey;
top:0;
left:0;
width:100%;
height:100%;
}
#bg img {
position:absolute;
top:0;
bottom:0;
margin-left:10%;
min-width:80%;
height:100%;
}
#contentBox
{
position:top;
left:0;
margin-top:25%;
height:30%;
max-width:90%;
background-color:#ffffff;
opacity:0.6;
filter:alpha(opacity=60);
}
#contentBox:hover
{
position:top;
left:0;
margin-top:25%;
height:30%;
max-width:90%;
background-color:#ffffff;
opacity:0.9;
filter:alpha(opacity=90);
}
#linkCloud
{
float:left;
min-width:11%;
min-height:100%;
background-color:blue;
opacity:0.9;
filter:alpha(opacity=90);
}
#feed
{
float:right;
top:0;
right:0;
min-height:100%;
min-width:10%;
background-color:red;
opacity:0.9;
filter:alpha(opacity=90);
}
</style>
</head>
<body>
<div id="bg">
<img src="/home/samzors/Desktop/Gimp/skull.jpg" alt="">
<div id="feed">
<p>hello world</p>
</div>
<div id="contentBox">
<div id="linkCloud">
<p>hello world</p>
</div>
</div>
</div>
</body>
</html>