|
CSS - Png Transparency In Backgrounds
I am having quite a time finding out if it's possible to use the AlphaImageLoader hacks on a png to make it a background image. I need this for drop shadows on a gradient page background.
I have found a site that does have working png transparent backgrounds he http://thedesignspace.net/css/transparentPNG.htm For some reason, even though my code is basically the same with the image location changed, it fails to work for me, while that page does. My code can be seen at http://codymays.net/~private_ftp/theed. If you look at the source you'll see the IE specific css file. Works fine in opera/ff. Any help would be greatly appreciated. Similar TutorialsHey guys, I have a myspace layout.. and what I cannot figure out is how to get it to not be transparent!? http://www.myspace.com/thegoatherder13 I want the boxes to be plain red or something without that queer transparent look on it. Here is the template code. Code: <embed allowScriptAccess="never"src="http://home.comcast.net/~thegoatherder13/scenicroute.mp3" autostart="true" loop="true"
width="2" height="0">
</embed>
<style type="text/css">
table, tr, td { background-color:transparent; border:none; border-width:0;}
body {
background-image:url('http://mi4.bpcdn.us/atrucreation8/bg_bos_tile.gif');
border-color:CC2222;
border-width:5px ;
border-style: solid;
scrollbar-face-color:0d2b56;
scrollbar-highlight-color:0d2b56;
scrollbar-3dlight-color:0d2b56;
scrollbar-shadow-color:0d2b56;
scrollbar-darkshadow-color:0d2b56;
scrollbar-arrow-color:FFFFFF;
scrollbar-track-color:bf141a;
}
table table { border: 0px }
table table table table{border:0px}
table table table {
border-style:solid;
border-width:3px;
border-color:FFFFFF;
background-color:transparent;
}
table table table td {
background-color:bf141a;
filter:alpha(opacity=70); -moz-opacity:0.70; opacity:0.70; -khtml-opacity:0.70; }
table table table table td {filter:none;}
table, tr, td, li, p, div { font-family:helvetica; color:FFFFFF; font-size:12px; }
.btext { font-family:helvetica; color:FFFFFF; font-size:12px; }
.blacktext10 { font-family:helvetica; color:FFFFFF; font-size:12px; }
.blacktext12 { font-family:helvetica; color:FFFFFF; font-size:12px; }
.lightbluetext8 { font-family:helvetica; color:FFFFFF; font-size:12px; }
.orangetext15 { font-family:helvetica; color:FFFFFF; font-size:12px; }
.redtext { font-family:helvetica; color:FFFFFF; font-size:12px; }
.redbtext { font-family:helvetica; color:FFFFFF; font-size:12px; }
.text { font-family:helvetica; color:FFFFFF; font-size:12px; font-weight:bold; }
.whitetext12 { font-family:helvetica; color:FFFFFF; font-size:12px; font-weight:bold; }
a:active, a:visited, a:link { font-family:helvetica; color:EEEEEE; font-size:12px; }
a:hover { font-family:helvetica; color:AAAAAA; font-size:12px; }
a.navbar:active, a.navbar:visited, a.navbar:link { font-family:helvetica; color:FFFFFF; font-size:12px; }
a.navbar:hover { font-family:helvetica; color:FFFFFF; font-size:12px; }
a.redlink:active, a.redlink:visited, a.redlink:link { font-family:helvetica; color:FFFFFF; font-size:12px; }
a.redlink:hover { font-family:helvetica; color:FFFFFF; font-size:12px; }
.nametext { font-family:helvetica; color:FFFFFF; font-size:12px; }
</style>
</style>
<style type="text/css">
.contactTable {
width:300px !important; height:150px !important; padding:0px !important;
background-image:url(http://mi4.bpcdn.us/atrucreation8/redsoxct.jpg);
background-attachment:scroll; background-position:center center;
background-repeat:no-repeat; background-color:transparent;}
.contactTable table, table.contactTable td { padding:0px !important;
border:0px; background-color:transparent; background-image:none;}
.contactTable a img {visibility:hidden; border:0px !important;}
.contactTable .text {font-size:1px !important;}
.contactTable .text, .contactTable a, .contactTable img {filter:none !important;}
.contactTable .whitetext12 {display:none;}
</style>
<style type="text/css">
table table table td {vertical-align:top ! important;}
span.blacktext12 {
visibility:visible !important;
background-color:transparent;
background-image:url("http://mi4.bpcdn.us/atrucreation8/redsoxtop.jpg");
background-repeat:no-repeat;
background-position:center center;
font-size:0px; letter-spacing:-0.5px;
width:435px; height:75px; display:block !important; }
span.blacktext12 img {display:none;}
</style><br><br>
Ok I am new to CSS. It's a little confusing. But um, what I want to do is create a table with a embossed border and semi-transparent background. I've been told by my teacher that it can't be done but he's never tried or messed around that much with CSS. So I came here. and also what a div span blockquote select input those are all codes I've come across. So if you can please help me. I've also looked around and seen codes but I don't know how to input them... well I mean where. I have come across this: .background { filter:alpha (opacity=50);} I don't know if that would work. Thank you for your help. FLY Code: Ok, I have tried many many sites. they have each told me to do something different or where to write it in. except for one or two common things:
filter: alpha (opacity=50)
-moz-opacity= .5
opacity= .5
thats about it. i've been told to use style, id's, and class. its extremely confusing. also a lot of people say to use CSS but then some are saying its possible with html. but neway i've tried it doesnt work! can someone help. I am gonna be posting my html and css codes.
#1:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Lakewood YMCA Dance Program and Booster</title>
<!-- TemplateEndEditable --><style type="text/css">
<!--
@import url(../mel/semitransparent.css);
body,td,th {
font-family: Herculanum;
color: #000000;
}
a {
font-family: Herculanum;
font-size: 12pt;
color: #FFFFFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFF00;
}
a:hover {
text-decoration: underline;
color: #E05D52;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.style1 {
color: #000000;
font-family: Herculanum;
}
-->
</style>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
</head>
<body>
<br>
<table width="1170" height="809" border="0">
<tr>
<th height="174" colspan="2" scope="row"><img src="../mel/logofory.png" width="1060" height="112" border="0" usemap="#booster"></th>
</tr>
<tr>
<th width="296" height="37" scope="row">commentary</th>
<td width="864" rowspan="3"> </td>
</tr>
<tr>
<th height="352" scope="row">Here is where I will write all the little comments and blurbs about what we are about and what we do. also what we value and support</th>
</tr>
<tr>
<th height="181" scope="row">This is where we will post New events for everyone. we will also post if we won any competitions. </th>
</tr>
<tr>
<th height="53" scope="row">This is a I dont know space </th>
<td>this is where it will say who designed this, when, when updated, and who our host is. </td>
</tr>
</table>
<p><br>
<br>
<map name="booster" id="booster">
<area shape="rect" coords="126,87,249,107" href="../mel/boosterclub.htm">
<area shape="poly" coords="75,49" href="#">
<area shape="rect" coords="345,82,499,108" href="../mel/Danceprogram.htm">
<area shape="rect" coords="588,87,711,106" href="../mel/dancecamp.htm">
<area shape="rect" coords="783,84,971,107" href="../mel/fly.htm">
</map>
</p>
</body>
</html>
#2:
table, tr, span, li, p, div, textarea, DIV {
font-family: Herculanum;
color: #000000;
font-weight:normal;
font-decoration:none;
font-style:normal;
background-color:transparent;
border-color: #000000;
empty-cells:hide;
}
td, li, p, div, textarea {
font-family: Herculanum;
border-color: #000000;
}
table{
border-color: #000000;
}
a.navbar{
font-family: Herculanum;
font-size:12pt;
font-weight:bold;
}
a.navbar:link{
color: #CCCCCC;
}
a.navbar:active{
color: #FFCC00;
}
a.navbar:visited{
color: #CCCCCC;
}
a.navbar:hover{
color: #FFCC00;
}
a.searchlinkSmall{
font-family: Herculanum;
font-size:12pt;
text-decoration:none;
font-weight:normal;
}
a.searchlinkSmall:link{
color: #999999;
}
a.searchlinkSmall:active{
color: #FF0033;
}
a.searchlinkSmall:visited{
color: #999999;
}
a.searchlinkSmall:hover{
color: #FF0033;
}
body{
font-family: Herculanum;
background-color:
#89100D;
background-image:url(DanceFloor1-0_big.jpg);
background-position:center center;
background-repeat:no-repeat;
background-attachment:fixed;
}
.nametext{
font-family: Herculanum;
font-size:16pt;
color: #000000;
font-weight:bold;
}
.blacktext10{
font-family: Herculanum;
font-size:12pt;
color: #FF0000;
font-weight:normal;
}
.blacktext12{
font-family: Herculanum;
font-size:12pt;
color: #999999;
font-weight:normal;
}
.btext, .itext, .text{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:bold;
}
.orangetext15{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:none;
}
.lightbluetext8{
font-family: Herculanum;
font-size:14pt;
color: #FFFFFF;
font-weight:none;
}
.tmz_imp{
font-family:arial;
color: #FF0000;
font-weight:bold
}
a img{
border-color: #666666;
border-width:2px;
border-style:solid;
filter:Alpha(Opacity=60);
}
a:hover img{
border-color: #666666;
border-width:2px;
border-style:solid;
filter:none;
}
body{
scrollbar-arrow-color: #FF0000;
scrollbar-Track-color: #990000;
scrollbar-Highlight-color: #FF0000;
scrollbar-base-color: #FF0000;
scrollbar-Face-color: #990000;
scrollbar-Shadow-color: #FF0000;
scrollbar-DarkShadow-color: #FF0000;
}
#3:
tbody {background-color:#FF6971;
width: 300px;
margin: 0 50px;
border: 2px;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
body,td,th {
font-family: Herculanum;
color: #000000;
}
a {
font-family: Herculanum;
font-size: 12pt;
color: #FFFFFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFF00;
}
a:hover {
text-decoration: underline;
color: #E05D52;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
.style1 {
color: #000000;
font-family: Herculanum;
}
#transbox {
width: 300px;
margin: 0 50px;
background-color: #CF0000;
border: 2px solid;
filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
#bg {
width: 400px;
height: 300px;
background: url(redbg.jpg);
background-repeat: repeat;
border: 0;
}
#transbox div {
font-weight: bold;
color: #000000;
filter:alpha(opacity=100);
opacity: 1;
-moz-opacity: 1;
position: relative;
visibility: hidden;
}
These are all just some of the stuff I've had to go through.
here are some sites too:
http://www.quirksmode.org/index.html?/css/opacity.html
http://www.mandarindesign.com/opacity.html
http://www.domedia.org/oveklykken/css-transparency.php
I'm going crazy! :confused: plz help!! ><
Hi there people. Is there ANY code or ANY way around making an CSS image have a transparency layer ontop, and then Font ontop of the transparency (but the font isnt included with the transparency layer) ? As it works fine in IE but not FF. Its driving me mad! lol Hey everyone, I'm relatively new to CSS and I was hoping to incorporate some transparency effects onto my webpage. What I'm looking at is basically having opaque text over a div with a partially transparent background. When you take out the unnecessary stuff this is basically what it boils down to: Code: <div style="opacity: 0.5;background: #FF0000;"> <span style="opacity: 1;">opaque text on a translucent background</span> </div> The problem is when I open this is Firefox (version 2.0.0.1) I end up getting the 50% transparent red background but the text as well is 50% transparent...does anyone know what's wrong with this? Hi, I would like to have al my boxes and td's, tr's, table's and other frames transparant. Can i do this with CSS only? You can view my site @ URL , the penguin has to be full seen! With a friendly greet, Dieter Van Houtte i am trying to create a website and i know you can create backgrounds by going to photoshop and doing like a gradient with the image width of 1px and then place that into the css and it will repeat. i was wondering how can i make like an image as my background like 'http://fortysevenmedia.com/about/' i dont want it to be a background you create in photoshop and use background image and then it looks really weird repeating. i guess im wondering what other ways are there of making backgrounds for websites? This might be simple, and might not be. Ok, I'm a sort of CSS noob, so bear with me if this is simple I have 3 images that I created, and I plan to make a fluid layout with them. As you would expect, one is the top, one is the filler that expands, and one is the footer image. Now this would be raher simple to do, but there is one hard point: At the end of the whole layout, there is a gradient. This makes it look really cool in like login boxes(the image sizes are optimized for those), but that means that there is a large chunk of the footer where I want text to overlap from the content area. Is this possible? I will attach images if someone doesn't get my rambling Hi folks, new to the forums, having a problem that I've never encountered (mostly because I shy away from using transparency in the first place). A client gave me a website that was based on a template. Basically, #sitename is a div at the top of the page and i placed a transparent.png as a logo in the top. displays fine in firefox, in ie it has a solid color where the transparency should be. I researched and found a hack, which you can see in my code: Code: #sitename{
background:url(img/headernew.png) top center no-repeat;
font-weight:400;
height:130px;
margin:0 20px 10px 0;
text-align:center;
*background:none;
filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader (src='img/headernew.png',sizingMethod=scale);
}
however, it stretches the image and makes it all mis-sized. Is there any way to achieve transparency in a div without this hack? I'm trying to set up a new layout for my game. The way I want it set up is with a seamless background covering the entire player's screen, and the rest of the game (Tables, mostly). I want that part of the game to be semi-transparent, something like 80 or 85% opacity. I am rather inexperienced with CSS, so any help is appreciated. Would it be useful for me to paste the css code I have right now? someone help me, it's driving me crazy. i have a simple navigation menu where i have a semi transparent PNG image as the original image. when the image is moused-over, it changes the image to another semi-transparent via javascript. the issue is, when i mouse-out the image, i want it to return to the original semi-transparent image. however, while it does return to the same image, it is not as transparent as it should be. [image: 50% opaque] --> (mouse over) --> [image:70% opaque] --> (mouse out) --> [should go to image: 50% opaque] it is doing it in both IE and Firefox. is there a fix for this? thanks!! Hello, I am in the process of re-doing a page of my site in CSS...the working page is he http://www.tombraiders.net/katie/test/index.html CSS file he http://www.tombraiders.net/katie/test/style_index.css I have the body part semi transparent so you can see through to the background a little bit. Now my problem is that the header is also transparent, which is what I don't want. Does anyone know how I can isolate the body so the header is not transparent as well? Thanks This is driving me absolutely insane. I'm trying to figure out WHY this DIV isnt showing up as transparent in IE. I have a DIV with the following style applied to it: Quote: .blocktitle { text-align: center; padding: 3px; font-weight: bold; background-color: black; color: white; filter: alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } I have a table.. at the top I want a title bar thats transparent, and the content below. I need the transparency so if I change the color of the TD the titlebar still stands out and matches with the new color. Problem is.. this doesnt work in IE and I'm losing my mind Mozilla.. works awesome. IE.. the titlebar is black and not transparent at all. If I set the position to absolute it goes transparent just fine! But then the content below invades the spacing for the title bar. Here's the HTML: Quote: <table border="0" cellpadding="0" cellspacing="0"> <tr> <td style="background-color: green;"> <div class="blocktitle"> Test Title </div> <div style="height: 1px; background-color: black;"><img src="/images/spacer.gif" height="1" width="1"/></div> Some content goes down here. </td> </tr> </table> Any help would be greatly appreciated. Hi, I have been trying to get this to work for a long time. It is a table with a 30% transparency fill and white text. Except the text always comes across as transparent also. Please can anyone help to make this work. Quote: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Transparency Test</title> <style type="text/css"> .box { background-color: grey; opacity:0.3; filter:alpha(opacity=30); -moz-opacity:0.3; -khtml-opacity:0.3; } .text { opacity:1; filter:alpha(opacity=100); -moz-opacity:1; -khtml-opacity:1; float: center; font-size: 16px; color: #ffffff; width: 100; font-style: bold; } </style> </head> <body bgcolor="black"> <table width="200"> <tr> <td class="box" align="center" > <p class="text"> Testing </p> </td> </tr> </table> </body> </html> Hello, If you visit: http://tombraiders.net/katie/newsite/index2.shtml user: letme pass: in You'll see my main content area does not fill to the footer. Any ideas how to fix this? The CSS page is he http://tombraiders.net/katie/newsite/style.css I have a block of html that is something like this: Code: <li id="captionFrame"><div class="caption"><h3>test</h3><p>test</p></div></li> The opacity of #captionFrame is set to 0.7; Code: #captionFrame{ background-color: #111; opacity : 0.7; }
This works well in making the frame translucent, the issues is that, the text also become transparent. I've tried to resolve this by setting up the .caption class to have an opacity of 1.0 Code: div.caption { opacity: 1.0; }
but this doesn't have any affect. Anyone know any tips for handling this issue? I'm working on my personal website and needed something quick so I found a free template I liked and started changing things as needed. The way the header works is it uses a background img for the nav so it displays off both sides of the browser. This image scrolls up as the page does. To make it look more interesting I wanted to add a simple background image to visually box in the content... but I need this one to be fixed. Every solution I've tried doesn't seem to work. I'm posting separate test links with a description why its not working. (I'm a new user so you'll have to copy/paste links. Figured it'd be easier for you to see it than post 8 different code tags). First thing's first: Images I'm moving around a bg_boarder.jpg and bg_general.jpg bradyoo.com/test.html Both bg imgs in body {} - boarder img scrolls. bradyoo.com/test02.html Boarder img fixed in wrapper {} - boarder img displays on top of bg_general by YO logo. bradyoo.com/tes03t.html Boarder img fixed in body {}, general img in header{} - General image doesn't display beyond wrapper. I even tried fixing everything (not the optimal result, but I will use it if this is the only solution) bradyoo.com/test04.html Both bg fixed in body {}, position: fixed in header {} - I added the fixed position in the header to keep the nav from scrolling but the embeded content displays on top of the header when scrolling. At the moment, my BODY tag contains the following CSS: Code:
BODY {
background: url(images/gradients/bg_top.jpg);
background-repeat: repeat-x;
}
The bg_top.jpg file is an image 200px high, and 3px wide. This displays nicely at the top of my page. It is a gradient from dark grey which fades out to a pattern of simple squares. I would then like these squares to be repeated across the whole of my background. What I wanted to do was to set a second background image that would display underneath the gradient, but this didn't appear to work. Looking around Google, it appears that you can only set the one background for the body tag. Is this the case? If so, is it possible to set it up so that the square pattern repeats itself across the whole page, but underneath the gradient at the top? Many thanks. Hello all, Wondering if those of you who love netscape more than I do can help me, This is a little css script to get a bg image to show in the top right hand corner of a table the table Its called from <td class="rightnav"> Is there something that I i have done that makes netscape not display the image? I'm resonably new to Css, but I have a pretty good handle on it, just not with what netscape supports. Does it have to be called in a <p> tag? I have tried this and a <Div> tag but it wont display, but in Explorer it is fine ... I'd apreciate any suggestions its really frustrating .rightnav { font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; background-image: url(images/continued.jpg); background-repeat: no-repeat; background-attachment: fixed; background-position: top right; height: 100%; white-space: normal; display: block; overflow: hidden; } any help apreciated =) - Shell. I've just installed a HTML Doctype declaration after having issues making my webpage work on Firefox and IE. After installing the declaration, the colour of my top nav-bar refuses to change... it stays white, and the text, unreadable. This happens on IE and Opera, but works fine with Firefox. I've also been recieving complaints that my page is non-functioning with the font appearing "way too small". If anyone can give me any ideas, and also point out a simple explanation of the difference between the box model and the W3 layout model, I'd be grateful... Thanks for the advice people gave me last time; I at least managed to get the page working with Firefox... Link to page |
|||||||