Menu
Right now I have a chalkboard background on my <div class”content”> shell around the sites content and then a drawing in chalk that I want to place above the chalkboard, but make it so that it doesn’t sit on any page elements like paragraphs, forms, etc.
Right now I can play with the z-indexes and either get the chalk image to not show up at all, or show up but be above all the page elements.
I have tried modifying my reset.css to make all listed elements have a z-index of 5, my .content div have a z-index of 1 and the image have a z-index of 3 but that didn’t work. I have also tried applying the background to the body, but the background size makes it stretch to just the visible area of the browser. Once you scroll down there is no background below the fold.
Here’s my code.
[code=html]<body>
<div class=”content”>
<img src=”images/chalkImage.png” id=”bg2″ alt=””>
<!– Everything else –>
[CODE].content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -67px; /* the bottom margin is the negative value of the footer’s height */
background:url(../images/chalkboard-noborder.jpg);
background-repeat:no-repeat;
background-size: 100% 100%;
background:url(../images/ChalkBoard-BG-repeat-dark.png) repeat9; /* IE8 and below */
}
[CODE]#bg2 { position: absolute; top: 31px; right: 45px; z-index: 1;}
