<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/REC-html40/transitional.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" > body {
background: url(./water_lilies.jpg);
background-repeat: no-repeat;
}
/*This is where the magic happens!*/
div.box {
/*Any properties you'd want the box to have.*/
/*Would probably be position, dimension type stuff.*/
/*Though personally I would have a div outside this
to control the dimensions.*/
border: 1px solid #000000;
position: relative;
width: 100%;
}
div.box_contents {
background-color:transparent;
height: 100%;
position: relative;
width: 100%;
z-index: 101;
}
div.box_background {
background-color: white;
height: 100%;
filter:alpha(opacity=75); /* IE's opacity*/
left: 0px;
opacity: 0.75;
position: absolute;
top: 0px;
width: 100%;
z-index: 99;
}
</style>
function change_w(id, pixels) {
var x = document.getElementById(id);
x.style.width = x.offsetWidth + pixels + "px";
}
function change_h(id, pixels) {
var x = document.getElementById(id);
x.style.height = x.offsetHeight + pixels + "px";
}
/*This function is meant to be used when you are needing
faux getElementsByName() in IE. IE seems so use the 'id'
attribute instead of 'name' when you use getElementsByName().
tag = This tag name that the 'name' attribute you want to
get is attached to. Like if you called getElementsByTagName().
name = The value of the 'name' attribute you want.
*/
function getElementsByName_iefix(tag, name) {
var elem = document.getElementsByTagName(tag);
var arr = new Array();
for(i = 0, iarr = 0; i < elem.length; i++) {
att = elem[i].getAttribute("name");
if(att == name) {
arr[iarr] = elem[i];
iarr++;
}
}
return arr;
}
/*This function resets the height and width of the background
to that of it's parent element's height and width.
tbg_id = This is the value of the name attribute you named all your
backgrounds.
*/
function transparentbg(tbg_id) {
var bak = getElementsByName_iefix("div", tbg_id);
for(i = 0; i < bak.length; i++) {
bak[i].style.height = bak[i].parentNode.clientHeight + "px";
bak[i].style.width = bak[i].parentNode.clientWidth + "px";
}
}
</script>
</head>
<body onload="transparentbg('bg_name')" onclick="transparentbg('bg_name')"> <div style="width: 500px;">
<div class="box" id="box"> <div class="box_background" name="bg_name"> </div> <div class="box_contents"> Width:
<input type="button" value="+" onclick="change_w('box', 30);" /> /
<input type="button" value="-" onClick="change_w('box', -30);" /><br /> Height:
<input type="button" value="+" onclick="change_h('box', 30);" /> /
<input type="button" value="-" onClick="change_h('box', -30);" /><br /> <!-- This is a fix that is mainly for IE. Otherwise you'll get white space where you don't want it.-->
<div style="padding: 2px; font-weight: bolder; font-size: 14px;"> This is the box contents! :O
<br /> You see, the background will cover the whole div block no matter how wide or tall!
Look at me! More content!
</div>
</div>
</div>
</div>
</body>
</html>
| 