I have an address that I want to put in a box with a transparent background over an image so the image can be seen through the background in the address box. I know their is a transparent code with background. How do I make the background in the box a certain color and then make that particular color background transparent? I keep seeing examples on forums of making a .png image. Is that the only way to do this or not? If so, any ideas of how to make that image? Here is an example of what I want to do:
<!-- m --><a class="postlink" href="http://www.csszengarden.com/?cssfile=/092/092.css&page=8">http://www.csszengarden.com/?cssfile=/0 ... css&page=8</a><!-- m -->
The box under "road to enlightenment" has that transparency to it. How do I do that?
Please help. Thanks.That's an illusion. Right-click in the box away from any text and do a View Background Image and you'll see.Originally posted by ray326
do a View Background ImageAnd to do one of these, you'll need one of these (<!-- m --><a class="postlink" href="http://getfirefox.com/">http://getfirefox.com/</a><!-- m -->).
I do not understand what you mean by it is an illusion. I right clicked in the box and there is no option to view background image. I am using Safari. If it is in fact an illusion then how do I accomplish that illusion? Thanks for the links for the books to read.Originally posted by asmyth
If it is in fact an illusion then how do I accomplish that illusion? Thanks for the links for the books to read. <!-- m --><a class="postlink" href="http://www.meyerweb.com/eric/css/edge/complexspiral/demo.htmlOk">http://www.meyerweb.com/eric/css/edge/c ... emo.htmlOk</a><!-- m -->, so I read the article from Eric Meyer in the link given but I am confused. Maybe I have not learned enough basics about CSS yet. So I need help. Here is my CSS code:
body {background-color:#555753;}
#pic {position: absolute; top: 0px; left: 0%;}
#title {position: absolute; top: 373px; left: 8%; color:#bedfc4;}
#content {position: absolute; top: 485px; right: 361px; border-style: solid; border-color:#000000; border-width: 1px 1px 0px 1px; background-color:#bedfc4; padding: 5px}
#address {position: absolute; top: 120px; left: 60%; background-color:#b57600; border-style:solid; border-color:#000000; border-width: 4px; padding: 5px 10px 5px 10px;}
#address a:hover {color:#820010;}
#address a:visited {color:#820010;}
#trailers {display: block; position: absolute; top: 133px; right: 10%; background-color:#cccccc; background-repeat: repeat-y; border-style: solid; border-color:#000000; border-width: 0px 2px 0px 2px; padding: 0px 5px 570px 0px;}
#trailers li {list-style-type: none;}
I am trying to place the adddress box partially over the picture(pic) so that the background of the address box is transparent and I can see the picture underneath it, similar to what Meyer has done on the link with the seashell and his content:
<!-- m --><a class="postlink" href="http://www.meyerweb.com/eric/css/ed...piral/demo.html">http://www.meyerweb.com/eric/css/ed...piral/demo.html</a><!-- m -->
Except my address box is small and will only have a portion of it hovering over the picture. I read the article but did not understand how he put it all together, so if anyone can help me out I would appreciate it. Thanks.Do you mean you want a transparent background or a translucent one? Because translucent I can tell you how to do, without using background image illusions. The easiest way (that I've found) to do it is to insert the following tag into the style section of your div (or table, blockquote, p, whatever):
<div style="filter: alpha(opacity=72); -moz-opacity:0.72; background-color: HEXCODE; border: BORDER SPECIFICATIONS; ... blah blah, the rest of your style tag"> Whatever your text is. </div>
If you use just the filter, it will still work.. But only in IE. The -moz-opacity makes sure it works for us people using Firefox too. Oh, and you do need a background color if you want one there. Otherwise, it will just be your text that's faded.Thanks, I am going to try it. Will either of those work in Safari?Safari I don't know about, I don't use it. I've submitted to the Firefox takeover myself. But if you find out, could you tell me?The only problem you'll run into when using the transparency commands is that it turns the entire Div's contents transparent, including the text.
One way around it is to set up a DIV with the dimensions that you want the transparent image or background to be. Then, make another DIV with the actual content you want placed over the previous DIV, make sure this one does not have a background though. That should solve the problem.
Check out this page to see the effect:
<!-- m --><a class="postlink" href="http://www.gamexplain.com/videos/starfoxassault.shtmlIf">http://www.gamexplain.com/videos/starfoxassault.shtmlIf</a><!-- m --> you want to do it the way it is done in the example link you posted then follow the meyerweb.com links directions.Triumph or anyone else that can help me,
When you wrote:
One way around it is to set up a DIV with the dimensions that you want the transparent image or background to be. Then, make another DIV with the actual content you want placed over the previous DIV, make sure this one does not have a background though.
I was not sure about the first div. Do I need a transparent image or background to place inside the first div. before I can set up that div.? Or not? If so then how do I get make that trasparent background?Can anyone help me with the previous question I posted about transparent backgrounds. I would really appreciate it. Thanks.Originally posted by asmyth
...how do I get make that trasparent background? Think about it: If the background is transparent, what is showing through?
Whoa, that's profound.
Please help me set up this opaque background. I have an opaque background "opaque1" that I want to place under the "address" div so that both of them are partially hovering over a background picture. How do I properly set this up? Here is what I have so far for that part of my CSS:
#opaque {
background-image: url(opaque1);
top: 120px;
left: 60%;}
#address {
position: absolute;
top: 120px;
left: 60%;
border-style:solid;
border-color:#000000;
border-width: 4px;
padding: 5px 10px 5px 10px;}
#address a:hover {color:#820010;}
#address a:visited {color:#820010;}
Should I place the opaque and address div in the same exact place? Do I need to add more to the opaque style to make the image show? Here are the divisions:
<div id="opaque">
</div>
<div id="address">
<h5>Celluloid Heroes
<br/> 217 E. Alameda Ave. Suite 202
<br/> Burbank CA 91502
<br/>Phone 818-557-1644 Fax 818-557-1377
<br/><a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]" style="text-decoration:none">[email protected]</a>
</div>
What do I put in the opaque div to show the image? The image is not showing on the page. Thanks for the help.Like I said, it's an illusion. Isn't this like what you have in mind?Hi asmyth,
What you want can be done, (although you posted this in 2005, I am not sure if you will even read this again, but I thought it would help others out Googleing for a similar solution).
To get transparency in all browsers you can use this CSS code:
<style>
.ClassOfDiv
{
-moz-opacity:0.5;
-khtml-opacity:0.5;
filter:alpha(opacity=50);
}
</style>
<div class="ClassOfDiv">Some stuff you want to be transparent goes HERE</div>
Hope that helps someone. And here is an explanation:
For IE use:: filter:alpha(opacity=50);
For FireFox use:: -moz-opacity:0.5;
For Safari use::-khtml-opacity:0.5;
Each of those will set the transparency for a specific browser. Just change the numbers to what % you want.websitedesigner - Thanks a lot for your help! I forgot that I had posted this thread. Wow, I've come a long way since then in the web design arena. I'm still learning though and now I've progressed to learning PHP. Anyway, thanks again.
<!-- m --><a class="postlink" href="http://www.csszengarden.com/?cssfile=/092/092.css&page=8">http://www.csszengarden.com/?cssfile=/0 ... css&page=8</a><!-- m -->
The box under "road to enlightenment" has that transparency to it. How do I do that?
Please help. Thanks.That's an illusion. Right-click in the box away from any text and do a View Background Image and you'll see.Originally posted by ray326
do a View Background ImageAnd to do one of these, you'll need one of these (<!-- m --><a class="postlink" href="http://getfirefox.com/">http://getfirefox.com/</a><!-- m -->).
I do not understand what you mean by it is an illusion. I right clicked in the box and there is no option to view background image. I am using Safari. If it is in fact an illusion then how do I accomplish that illusion? Thanks for the links for the books to read.Originally posted by asmyth If it is in fact an illusion then how do I accomplish that illusion? Thanks for the links for the books to read. <!-- m --><a class="postlink" href="http://www.meyerweb.com/eric/css/edge/complexspiral/demo.htmlOk">http://www.meyerweb.com/eric/css/edge/c ... emo.htmlOk</a><!-- m -->, so I read the article from Eric Meyer in the link given but I am confused. Maybe I have not learned enough basics about CSS yet. So I need help. Here is my CSS code:
body {background-color:#555753;}
#pic {position: absolute; top: 0px; left: 0%;}
#title {position: absolute; top: 373px; left: 8%; color:#bedfc4;}
#content {position: absolute; top: 485px; right: 361px; border-style: solid; border-color:#000000; border-width: 1px 1px 0px 1px; background-color:#bedfc4; padding: 5px}
#address {position: absolute; top: 120px; left: 60%; background-color:#b57600; border-style:solid; border-color:#000000; border-width: 4px; padding: 5px 10px 5px 10px;}
#address a:hover {color:#820010;}
#address a:visited {color:#820010;}
#trailers {display: block; position: absolute; top: 133px; right: 10%; background-color:#cccccc; background-repeat: repeat-y; border-style: solid; border-color:#000000; border-width: 0px 2px 0px 2px; padding: 0px 5px 570px 0px;}
#trailers li {list-style-type: none;}
I am trying to place the adddress box partially over the picture(pic) so that the background of the address box is transparent and I can see the picture underneath it, similar to what Meyer has done on the link with the seashell and his content:
<!-- m --><a class="postlink" href="http://www.meyerweb.com/eric/css/ed...piral/demo.html">http://www.meyerweb.com/eric/css/ed...piral/demo.html</a><!-- m -->
Except my address box is small and will only have a portion of it hovering over the picture. I read the article but did not understand how he put it all together, so if anyone can help me out I would appreciate it. Thanks.Do you mean you want a transparent background or a translucent one? Because translucent I can tell you how to do, without using background image illusions. The easiest way (that I've found) to do it is to insert the following tag into the style section of your div (or table, blockquote, p, whatever):
<div style="filter: alpha(opacity=72); -moz-opacity:0.72; background-color: HEXCODE; border: BORDER SPECIFICATIONS; ... blah blah, the rest of your style tag"> Whatever your text is. </div>
If you use just the filter, it will still work.. But only in IE. The -moz-opacity makes sure it works for us people using Firefox too. Oh, and you do need a background color if you want one there. Otherwise, it will just be your text that's faded.Thanks, I am going to try it. Will either of those work in Safari?Safari I don't know about, I don't use it. I've submitted to the Firefox takeover myself. But if you find out, could you tell me?The only problem you'll run into when using the transparency commands is that it turns the entire Div's contents transparent, including the text.
One way around it is to set up a DIV with the dimensions that you want the transparent image or background to be. Then, make another DIV with the actual content you want placed over the previous DIV, make sure this one does not have a background though. That should solve the problem.
Check out this page to see the effect:
<!-- m --><a class="postlink" href="http://www.gamexplain.com/videos/starfoxassault.shtmlIf">http://www.gamexplain.com/videos/starfoxassault.shtmlIf</a><!-- m --> you want to do it the way it is done in the example link you posted then follow the meyerweb.com links directions.Triumph or anyone else that can help me,
When you wrote:
One way around it is to set up a DIV with the dimensions that you want the transparent image or background to be. Then, make another DIV with the actual content you want placed over the previous DIV, make sure this one does not have a background though.
I was not sure about the first div. Do I need a transparent image or background to place inside the first div. before I can set up that div.? Or not? If so then how do I get make that trasparent background?Can anyone help me with the previous question I posted about transparent backgrounds. I would really appreciate it. Thanks.Originally posted by asmyth
...how do I get make that trasparent background? Think about it: If the background is transparent, what is showing through?
Whoa, that's profound.
Please help me set up this opaque background. I have an opaque background "opaque1" that I want to place under the "address" div so that both of them are partially hovering over a background picture. How do I properly set this up? Here is what I have so far for that part of my CSS:#opaque {
background-image: url(opaque1);
top: 120px;
left: 60%;}
#address {
position: absolute;
top: 120px;
left: 60%;
border-style:solid;
border-color:#000000;
border-width: 4px;
padding: 5px 10px 5px 10px;}
#address a:hover {color:#820010;}
#address a:visited {color:#820010;}
Should I place the opaque and address div in the same exact place? Do I need to add more to the opaque style to make the image show? Here are the divisions:
<div id="opaque">
</div>
<div id="address">
<h5>Celluloid Heroes
<br/> 217 E. Alameda Ave. Suite 202
<br/> Burbank CA 91502
<br/>Phone 818-557-1644 Fax 818-557-1377
<br/><a href=http://www.webdeveloper.com/forum/archive/index.php/"mailto:[email protected]" style="text-decoration:none">[email protected]</a>
</div>
What do I put in the opaque div to show the image? The image is not showing on the page. Thanks for the help.Like I said, it's an illusion. Isn't this like what you have in mind?Hi asmyth,
What you want can be done, (although you posted this in 2005, I am not sure if you will even read this again, but I thought it would help others out Googleing for a similar solution).
To get transparency in all browsers you can use this CSS code:
<style>
.ClassOfDiv
{
-moz-opacity:0.5;
-khtml-opacity:0.5;
filter:alpha(opacity=50);
}
</style>
<div class="ClassOfDiv">Some stuff you want to be transparent goes HERE</div>
Hope that helps someone. And here is an explanation:
For IE use:: filter:alpha(opacity=50);
For FireFox use:: -moz-opacity:0.5;
For Safari use::-khtml-opacity:0.5;
Each of those will set the transparency for a specific browser. Just change the numbers to what % you want.websitedesigner - Thanks a lot for your help! I forgot that I had posted this thread. Wow, I've come a long way since then in the web design arena. I'm still learning though and now I've progressed to learning PHP. Anyway, thanks again.