Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations biv343 on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Transparent backgrounds (iframe question) 1

Status
Not open for further replies.
gwar2k1

gwar2k1

Programmer
Apr 17, 2003
387
GB
Hey

I have a background to a div that is an image. In this div is an iframe which covers the image. Is there any way of having a transparent background color to either an iframe or an actual page?

TIA,
Gwar3k1

~*Gwar3k1*~
"To the pressure, everything's just like: an illusion. I'll be losing you before long..."
 
Sort by date Sort by votes
transparent background color

I think maybe you mean translucent? If it were transparent you would not be able to see it *grin*.

Anyway... to answer your question... you can indeed have a background image in a page (and since the src of your iframe is a page, you can by default achieve a background image in your iframe). If you saved the background image with something like 30% opacity (from Photoshop for instance) then you will also be able to achieve the appearance of it being translucent too!

You can do it many ways... but let's do it using CSS (because that's going to be useful for many others as well I think):

Code: 
<style type=&quot;text/css&quot;>
body
{
  font-size:0.8em;
  font-family:verdana,arial,sans-serif;
  margin:0px;
  padding:0px;
  background-color:#CCCCCC;
  background-attachment:scroll;
  background-position:50px 400px;
  background-image:url(../images/logo_sidebar.gif);
  background-repeat:no-repeat;
}
</style>

All the best,
Jeff
 
Upvote 0 Downvote
thanks =) so ur saying i cant really do what i want but i can have the illusion of it? i did think about image over image but thats more loading time =S oh well sacrafices must be made. thanks again

~*Gwar3k1*~
&quot;To the pressure, everything's just like: an illusion. I'll be losing you before long...&quot;
 
Upvote 0 Downvote
I am looking for a more general (or more specific, dpending on how you look at it) situation.

I just want a div (a dropdown menu) to overlay the page with 90% opacity. The page below has live text.

Can this be done?
Can you point me at site(s) that do this?
Does anyone offer a pre-fab menu with this option?
 
Upvote 0 Downvote
It can be done using CSS opacity. This page has a pretty good discussion on this and supplies some code that could be of use to you:


I think the following (taken from that page) is what you might be after:

Code: 
img {filter: alpha(opacity=10);-moz-opacity:0.10;} 

<img src="blah.png" width="20" height="20"/>

For Internet Explorer:
opacity=n (where n is from 0 to 100)

For Mozilla:
-moz-opacity:n (where n is from 0.00 to 1.00)

From experience, this doesn't work on IE5 for MacOS9 (probably the same for MacOSX as well). Anyone else?

Cheers,
Jeff
 
Upvote 0 Downvote
Yeah, I stumbled across the filter/moz solution, thanks.

Secondary problem:
The entire layer is semi-opaque. That includes any text, which gets unreadable below even 90% opacity. I'd like it if the background were semi-opaque, but the text were solid.

My solution is to put the background and the text on separate layers.

And the only problem with that is that it amy complicate out-of-the-box DHTML dropdown menu solutions (which is what I'm building).

So, again: does anyone know of a dropdown menu solution that uses semi-opaque bgs, but not semi-opaque text?

 
Upvote 0 Downvote
Possible solution:

fake the drop-down.

Put a button with a 'v' on it (like a down-arrow) next to a text input and show/hide a DIV containing an IFRAME with your list of options, each enclosed in a SPAN tag, with onmouseover, onmouseout, and onclick events used to mimic drop-down list use.

Here is an example that works for me in IE6. Note the use of Jeff's (BabyJeffy's) opacity style. Also, my STONE.BMP is a texture bitmap that repeats in the DIV but, due to how it looks, does not appear to repeat, so it makes a nice background.

Here's the code:

Code: 
<html>
<head>
<script>
var show=true;
function selectThis(spanObj)
{
 highlightThis(spanObj,true);
 selectedVal.value = spanObj.innerText;
 hideDropDown();
}

function dropDown()
{
 if(show)
 {
  show = !show;
  optionList.style.left = selectedVal.offsetLeft;
  optionList.style.top = selectedVal.offsetTop + selectedVal.offsetHeight;
  optionList.style.width = dropDownButton.offsetLeft - selectedVal.offsetLeft + dropDownButton.offsetWidth;
  optionList.style.display = 'inline';
  optionList.style.height = '10';
  optionList.style.visibility = 'visible';
  document.frames["optionListFrame"].setBackground();
 }
 else
 {
  hideDropDown();
 }
}

function hideDropDown()
{
 show = !show;
 optionList.style.visibility = 'hidden';
 optionList.style.display = 'none';
}

function highlightThis(spanObj, highlight)
{
 if(highlight)
 {
  spanObj.style.backgroundColor = 'blue';
  spanObj.style.color = 'white';
 }
 else
 {
  spanObj.style.backgroundColor = 'transparent';
  spanObj.style.color = 'black';
 }
}

function loadIFrame()
{
 var d = document.frames["optionListFrame"].document;
 d.write("<html>");
 d.write("<head>");
 d.write("<style>");

 d.write(".background{filter:alpha(opacity=30);position:\"absolute\";top=0;left=0;background-image:url(\"STONE.BMP\");z-index:-1;}");

 d.write("</style>");
 d.write("<script>");

 d.write("function setBackground()");
 d.write("{");

 d.write(" backgroundDiv.style.width = document.body.scrollWidth;");
 d.write(" backgroundDiv.style.height = document.body.scrollHeight;");

 d.write("}//end setBackground()");

 d.write("</scr"+"ipt></head>");
 d.write("<body onload='setBackground();'>");
 d.write("<span onclick='parent.selectThis(this)' onmouseover='parent.highlightThis(this,true)' onmouseout='parent.highlightThis(this,false)'>one</span><br />");
 d.write("<span onclick='parent.selectThis(this)' onmouseover='parent.highlightThis(this,true)' onmouseout='parent.highlightThis(this,false)'>two</span><br />");
 d.write("<span onclick='parent.selectThis(this)' onmouseover='parent.highlightThis(this,true)' onmouseout='parent.highlightThis(this,false)'>three</span><br />");
 d.write("<span onclick='parent.selectThis(this)' onmouseover='parent.highlightThis(this,true)' onmouseout='parent.highlightThis(this,false)'>four</span><br />");
 d.write("<span onclick='parent.selectThis(this)' onmouseover='parent.highlightThis(this,true)' onmouseout='parent.highlightThis(this,false)'>five</span><br />");
 d.write("<span onclick='parent.selectThis(this)' onmouseover='parent.highlightThis(this,true)' onmouseout='parent.highlightThis(this,false)'>six</span><br />");
 d.write("<span onclick='parent.selectThis(this)' onmouseover='parent.highlightThis(this,true)' onmouseout='parent.highlightThis(this,false)'>seven</span><br />");
 d.write("<span onclick='parent.selectThis(this)' onmouseover='parent.highlightThis(this,true)' onmouseout='parent.highlightThis(this,false)'>eight</span><br />");
 d.write("<span onclick='parent.selectThis(this)' onmouseover='parent.highlightThis(this,true)' onmouseout='parent.highlightThis(this,false)'>nine</span><br />");
 d.write("<span onclick='parent.selectThis(this)' onmouseover='parent.highlightThis(this,true)' onmouseout='parent.highlightThis(this,false)'>ten</span><br />");
 d.write("<div id='backgroundDiv' class='background'>");
 d.write("</div>"); //backgroundDiv
 d.write("</body></html>");
 d.close();
}
</script>
</head>
<body onload='loadIFrame();'>
<input name='selectedVal' disabled='disabled' type='text' size='30' /><input name='dropDownButton' type='button' value='v' onclick='dropDown()' />
<div id='optionList' style='position:absolute;visibility:hidden;display:none'>
<iframe height='100%' width='100%' id='optionListFrame'>
</iframe>
</div>
</body>
</html>

Have fun!

--Dave
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

SitesMasstec
  • Locked
  • Question
Viewport meta tag x iframe
Replies
0
Views
161
SitesMasstec
SitesMasstec
jason.lex
  • Locked
  • Question
Bootstrap grid and columns question
Replies
0
Views
152
jason.lex
jason.lex
caykamanj1966
  • Locked
  • Question
Sorting a grid list using iframe associated with Google Drive
Replies
0
Views
231
caykamanj1966
caykamanj1966
lupidol
  • Locked
  • Question
What does a question mark (?) stands for in ancho tag ? 1
Replies
2
Views
444
lupidol
lupidol
Katerine
  • Locked
  • Question
CSS question: Displaying 2-level unordered lists in a table layout? 1
Replies
7
Views
259
Katerine
Katerine

Part and Inventory Search

Sponsor

Back
Top