7 Replies - 2812 Views - Last Post: 24 November 2013 - 10:04 AM

#1 snoj  Icon User is offline

  • Married Life
  • member icon

Reputation: 93
  • View blog
  • Posts: 3,583
  • Joined: 31-March 03

Example: Transparent box backgrounds

Posted 11 November 2005 - 12:34 PM

Description: I've made some small changes to the code and it now works in both IE and Firefox. Though to get it to work in IE I had to resort to some javascript. Which you can find in the code. I've also recoded the height and width changing functions into just two instead of the ungodly four. You can find a live version here (http://josherickson.org/miscfiles/transhtmlcssbackgroundbox.html).Ever wonder how you could get partially transparent backgrounds for div boxes with only HTML/CSS? Well here's how.

<html>




 


<body onload="transparentbg('bg_name')" onclick="transparentbg('bg_name')">
Width: / Height: /
This is the box contents! :O You see, the background will cover the whole div block no matter how wide or tall! Look at me! More content!


Is This A Good Question/Topic? 0
  • +

Replies To: Example: Transparent box backgrounds

#2 snoj  Icon User is offline

  • Married Life
  • member icon

Reputation: 93
  • View blog
  • Posts: 3,583
  • Joined: 31-March 03

Re: Example: Transparent box backgrounds

Posted 11 November 2005 - 12:34 PM

Description: I've made some small changes to the code and it now works in both IE and Firefox. Though to get it to work in IE I had to resort to some javascript. Which you can find in the code.

I've also recoded the height and width changing functions into just two instead of the ungodly four.

You can find a live version here (http://josherickson.org/miscfiles/transhtmlcssbackgroundbox.html).Ever wonder how you could get partially transparent backgrounds for div boxes with only HTML/CSS? Well here's how.
test
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
        "http://www.w3.org/TR/REC-html40/transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<style type="text/css">
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>
 
<script type="text/javascript">
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);" />

               Height: <input type="button" value="+" onclick="change_h('box', 30);" /> / <input type="button" value="-" onclick="change_h('box', -30);" />

               <!-- 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 

                    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>

Was This Post Helpful? 0
  • +
  • -

#3 snoj  Icon User is offline

  • Married Life
  • member icon

Reputation: 93
  • View blog
  • Posts: 3,583
  • Joined: 31-March 03

Re: Example: Transparent box backgrounds

Posted 11 November 2005 - 12:34 PM

Description: I've made some small changes to the code and it now works in both IE and Firefox. Though to get it to work in IE I had to resort to some javascript. Which you can find in the code.

I've also recoded the height and width changing functions into just two instead of the ungodly four.

You can find a live version here (http://josherickson.org/miscfiles/transhtmlcssbackgroundbox.html).Ever wonder how you could get partially transparent backgrounds for div boxes with only HTML/CSS? Well here's how.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
        "http://www.w3.org/TR/REC-html40/transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<style type="text/css">
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>
 
<script type="text/javascript">
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);" />

               Height: <input type="button" value="+" onclick="change_h('box', 30);" /> / <input type="button" value="-" onclick="change_h('box', -30);" />

               <!-- 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 

                    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>

Was This Post Helpful? 0
  • +
  • -

#4 snoj  Icon User is offline

  • Married Life
  • member icon

Reputation: 93
  • View blog
  • Posts: 3,583
  • Joined: 31-March 03

Re: Example: Transparent box backgrounds

Posted 11 November 2005 - 12:34 PM

Description: I've made some small changes to the code and it now works in both IE and Firefox. Though to get it to work in IE I had to resort to some javascript. Which you can find in the code.

I've also recoded the height and width changing functions into just two instead of the ungodly four.

You can find a live version here (http://josherickson....kgroundbox.html).Ever wonder how you could get partially transparent backgrounds for div boxes with only HTML/CSS? Well here's how.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
        "http://www.w3.org/TR/REC-html40/transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<style type="text/css">
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>
 
<script type="text/javascript">
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);" />

               Height: <input type="button" value="+" onclick="change_h('box', 30);" /> / <input type="button" value="-" onclick="change_h('box', -30);" />

               <!-- 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 

                    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>

Was This Post Helpful? 0
  • +
  • -

#5 J2kq  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 14
  • Joined: 04-April 08

Re: Example: Transparent box backgrounds

Posted 03 April 2008 - 11:41 PM

hi there looks good - now can I add this in css for the links..? i.e. having it tranparant for link and visited but having a solid colour for hover and active.. (or reverse..) body { color: #06075a; font-size: 12px; font-family: "Comic Sans MS"; background-color: #06075a; } p { } td { } a:link { color: #fff; font-size: 12px; font-weight: bold; background-color: #06075a; text-decoration: none; } a:visited { color: #fff; font-size: 12px; font-weight: bold; text-decoration: none; } a:hover { color: #06075a; font-size: 12px; font-weight: bold; background-color: #eee; text-decoration: none; } a:active { color: #06075a; font-size: 12px; font-weight: bold; background-color: #eee; text-decoration: none; } .heading { color: #06075a; font-size: 14px; text-decoration: none; } .text10 { font-size: 10px; font-weight: bold; } .boxtext { color: #333; font-weight: bold; background-color: transparent; }
Was This Post Helpful? 0
  • +
  • -

#6 Aurel300  Icon User is offline

  • D.I.C Head

Reputation: 13
  • View blog
  • Posts: 230
  • Joined: 10-November 07

Re: Example: Transparent box backgrounds

Posted 27 April 2009 - 12:11 PM

You forgot the Mozilla opacity in styles. You should use both "opacity: 0.75" and "-moz-opacity: 0.75"... It is kinda more friendly with older Mozillas.
Was This Post Helpful? 0
  • +
  • -

#7 woodjom  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 34
  • View blog
  • Posts: 566
  • Joined: 08-May 08

Re: Example: Transparent box backgrounds

Posted 02 October 2009 - 01:28 PM

This is a good snippet. But what i do is create a partially filled image for the background, which blocks all activities behind the DIV, therefore causing the user to interact with said block and then go about the business. Big use for me is Logging In. you can check it out at http://main.silverlight3d.us Click the login button in the upper right corner and it will partially partially block the page view so it requires the user to login with credentials.
Was This Post Helpful? 0
  • +
  • -

#8 kiveollc  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 0
  • Joined: 23-November 09

Re: Example: Transparent box backgrounds

Posted 23 November 2009 - 08:38 AM

A much easier and far less js intensive way is: http://kiveo.net/tra...nt-backgrounds/ Uses no PNG's so there's no IE6 hacks and only enough IE CSS to make transparencies work.
Was This Post Helpful? 0
  • +
  • -

#9 snoj  Icon User is offline

  • Married Life
  • member icon

Reputation: 93
  • View blog
  • Posts: 3,583
  • Joined: 31-March 03

Re: Example: Transparent box backgrounds

Posted 23 November 2009 - 07:05 PM

@kiveollc: You're right, there is no need for js when the box never changes sizes...ever. However for boxes that do change size (like blog entries), there is a need to resize the transparent box, so js is needed for IE (6 & 7 and 8?) compatibility.
Was This Post Helpful? 0
  • +
  • -

#10 Toxicterror  Icon User is offline

  • blub

Reputation: 15
  • View blog
  • Posts: 687
  • Joined: 10-March 09

Re: Example: Transparent box backgrounds

Posted 27 April 2010 - 02:26 AM

thanks, this really just helped me ;)
Was This Post Helpful? 0
  • +
  • -

#11 aaronpl  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 0
  • Joined: 24-November 13

Re: Example: Transparent box backgrounds

Posted 24 November 2013 - 10:04 AM

try my html generator at htmleasy.weebly.com it is fast and easy :) If you like it, please donate/click the google +1 button
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1