# HTML AND CSS: semi transparent background but with full opacity text



## Tact

hi. i was having a bit of trouble figuring this out. i hope you guys can help me. but i was wondering how i can get semi transparent backgrounds (mainly an ifram including its scrollbar) but still have the text and content to be um...NOT transparent.

i've familiar with the div trick for setting a bg and the only two options i found were using the "filter: alpha (opacity=XX)" option and the other one where you allow transparencys in the ifram tag and then say this in the html file you want transparent:

the thing is, that with option one, EVERYTHING gets faded and semi transparent including text.

while for the second option, though the text is not transparent, the background is completely transparent rather than SEMI transparent.

so i was wondering if there was a way to have a semi transparent ifram (including scrollbar) as in the "filter:alpha" option, but still have full text as in the second option. is there any other way i don't know of?

please let me know. i was trying to figure out how to specify the opacity in the second option but i don't know how.

thanks in advance.


----------



## Snake~eyes

I'm not really sure you kind of lost me. Do you know of an example that I can look at?


----------



## Tact

sure. well the first option is this.

inside either a table tag, or the body tag, even a div tag and the actual "iframe" tag, you can add this css style that makes each of those properties semi transparent. and it would look something like this:

in here, the entire body of the html will be given an opacity, ranging from 0 to 100. 0 being completely transparent, and 100 being not transparent at all. and 50 being somewhere in the midde hence, semi transparency. its a really neat effect. 

the down side to this, is tha it makes all of the content in the body transparent as well. as in the text, and any images or whatever i might have on the page. whether i apply this style in the body tag, the ifram tag, or a div tag. its all the same.

the other option i have found available to me is one that makes a table or iframe transparent, BUT not the content, (like the text). however what i don't like about this options is that it makes the iframe COMPLETELY see through. and i only want it SEMI- see through. semi transparent. this code works like this.

in the ifram tag blahblah.htm you would put this inside it like so:

blahblah.htm

and then in the actually html file tha you want IN the iframe, you would put this int he body tag:

this is cool and all, it only makes the background transparent but not the text, however i can't figure out a way to change HOW transparent it really is. and that's my problem.

for a visual example. try looking at this.

http://ere-serene.org/transparentscrollbars.php

right here she talks about scrollbars but it can be applied to the whole iframe or specific tables and divs real easily so that's not important. this is just an example so you can see what i have right now, and what i'm trying to get. if you read the last sentense in her tutorial, she says: "That's all 0.o Keep in mind that whatever you put your opacity as, your text gets more transparent too. Easy site made, with transparent scrollbars!"

and tha's what i don't want. and what i'm trying to figure out. how to get semi transparency background and scrollbars, without semi transparent text.

let me know if you know.  thanks again and i hope tha clarifies things.


----------



## Corrosive

Personally, I've never heard of being able to do this - I'm going to do some research into it now because it sounds too interesting.

Meanwhile, I'll make a quick guess at a possible work around. From the looks of the syntax, it was not really designed with text in mind. So, you may have to create seperate classes for it to work.

My stylesheet would like so:
.background
{
filter: alpha (opacity=50);
}

.textontop
{
color: luminous orange (  )
background-color: transparent;
}

I hope that works.


----------



## Tact

ok. i tried out your idea and sadly, didn't work. but i think you might be on to something. there should be some declaration (or whatever its called) out there that would tell the browser to not fade the text or control the text and the frame seperately rather than together. but i cna't figure out waht. maybe if i found out how i could fade only text, then i should be able to give it a percentage of 100. 

anyone else have any ideas?


----------



## Corrosive

Actually, now I've thought about it a little more, I doubt that it would work with frames. Because it's two seperate pages, I doubt you could get them to merge together in this way.

Frames are becomeing a bit of a no-no in design anyway, so it may be worth adjusting your page so that the navigation (I presume the frames for that purpose) is on the same page. Ideally, you'd want to use CSS positioning and everything and you should be able to create a fast loading and very good looking page!


----------



## Tact

the thing is i've already got it working. i just want to specify more clearly to the browser that i don't want the text faded. the cool thing about the method i'm using is that i can apply it anywhere.

i can put it in the iframe tag. AND i can put it in the actual page that is going to be in the ifram as well inside the body tag, or even the tables if i wish. its practically stand alone and independent from anything outside such as the page that holds the iframe itself.

and i understand that frames are "not recommended" online. this is mostly an offline thing i'm messing with. and frames are always good imo. unless the designer is dumb enough to lock poeple out of the menu and not leaving a link back to the main page somehow and poeple gettting stuck. *rolls eyes* pfft.  that's like the only downside. (aside from compatability with other browsers which is an issue i always take into consideration anyway)

and the ifram isn't for navigation. its my blog. (damn blogs so popular these days). i coudln't help myself and felt the need to make one too and i'm trying to make it all kewl and stylish. ya know how it is. i'm trying to compete with the girls that seem to make the most amazing layouts and seem to be the ones that make the most blogs in the first place. i'll be using mine to keep records on the html changes i make and design issues i come across when messing with the style sheets, thumbnails and graphics in my site.

tha'ts pretty much it. i just finished applying this neat trick of using rollovers without needing any preloading because all of the instances are on a single image and i use css instead of javascript. really awesome.

aside from that. i could really use that code that could allow me to control the text and the background seperately. (/me thinks). hey, what if i can use the transparency style inside the font tag! wow. never thought of that. i gotta try that.

if anyone else has any other ideas. i'd really appreciate it.

and btw, thanks for the tips corrosive.


----------



## Tact

aw darnet. didn't work. anyone have any ideas?


----------



## pop345_ca

yo ~ i gotta idea... and it usually works .w most browsers... wut u do is force 100% not transparent on ta text by declaring ta style
like
<style type ="css/text"><!-- A:active{color:E9A63B;font-weight:none;font-family:"Arial";text-decoration:none;font-size:13;filter:alpha (opacity=100);}

that is for active links...

den put ta filter:alpha (opacity=100); in the table / div or frame... not sure if it'll work 4 ta pics... but i noe it works for text usually...


----------



## pop345_ca

* i mean like another opacity in the table / div / frame tag


----------



## Tact

oh i get it. yeah it sounds like it works. its like the tags in the body tag that would be like

and so i would use css to modify those specifically, and then have another on the iframe/table that is faded. and the text SHOULD be nice and opaque. awesome. i can't wait to try it. thanks a lot for the idea.

i might have to put another style for font, and text seperately, and see which one controls which and how. but i think i can pull it off.

thanks!


----------



## tshrbhag

Hey guys... thought i could use some help from this topic. i'm trying to acheive the same thing and i'm a bit new to html. if you could tell me exactly how i can do this, i'd appreciate that highly....

Terry


----------



## Guy

Something like this? (I bolded the magic words)


Code:


<html>
<head>
	<title>Test</title>
</head>
<body background="bg.jpg">
<div align="center">

<table height="200" width="200" bgcolor="#FF0000" style="filter: alpha (opacity=50);">
	<tr>
	<td><span style="[b]position: relative;[/b]"><b>Hello There</b></td>
	</tr>
</table>

</div>
</body>
</html>

Basically when you position the element to relative, it acts like a nested element but the styles do not cascade down onto it.


----------



## Tact

so that's what it was. man. and to think that i already went through hours of trouble making it work by using a background image in the iframe to look like its still teh background image in the page. which i should have prolly done int he begining but didnt want to. 

if i'm not to tired, i'll definately test it or isntead use it on somthing else cause i'm already done with that section on my site. lol. thanks though. i'm even more sure this will work if i ever need to apply such a setting again.

but for now. i'm satisfied wtih what i've done so far.


----------



## B-fly

Hello... I found this thread by Google... and I thought, someone might know how to fix my problem )

I'm currently working on... wait... 

lianne.camera-kid =dot= com  

I just started... and I would love to make the shadow (from the left border) semi-transparent but omg H.O.W.... I tried everything but nothing works. Could anyone help me out?


----------



## Tact

ok i looked at your source...wow you used css to make a shadow of an image? that's neat. i didn't know you could do that. i would have used photoshop to do that and then simply have a revamped image. but then that wouldn't help the semi transparent thing at all. it'd make it worse.  but seeing as how you were able to make it to begin with, surely some of the above codes might do it.


----------



## B-fly

well.... dynamicdrive-dot-com is my biggest friend


----------



## nettkkr

Hey i found out that if you use the tag within the opacity and set your css to the following it will work to show full opaque text...

I know for sure this works in IE. However i tried inserting within both the opaque areas and the text areas the -moz-opacity: 1; and it doesn't work with mozilla firefox. Does anyone know how to get it to work with firefox?

Dan


----------



## tGoM

has anyone found a fix for firefox for this yet? sorry to sound impatient or impolite but i've been searching for hours.


----------



## Tact

whats the exact problem? i never bother making sure my code is good for anything other than IE. (this was good back in the days when the world used nothing but IE. but now...)

so does ff simply not support it or you think it does but not sure how?

i'm sure ff is like any other browser where you can prolly list supported things on a table like


thing || ie || ff ||  opera
css || yes || maybe? || not sure
java || yes || should || also should
flash || yes || most likely || who knows


i've seen those once in a while. i use em to determine which one is more worthy of coding for. i always go with IE. 


anyway. since i don't know anything about ff. i dont know whether it supports it at all. if it does, and you can't get it to work, then i have no idea.


----------



## Mushoo

Ok, I was really excited when I saw this board, and read through some of the previous posts and thought that Tact had the exact problem as I do now, so it would be very very appreciated if someone could help me with this irritating problem as i am a complete dumbo when it comes to html/css editing.

New to the website called IMVU, they did prompted me with an option of using CSS or HTML to spice up our homepages. What I wish to create is a simple semi-transparent White background box(with a border, hopefully) with Opaque text in it, which hopefully works in most browsers.(but with FF and IE as first priority.) How do I go about doing this? Or can someone help me in doing so? HTML would be prefered, but CSS is very welcomed too. 

Thanks in advance..


----------



## tGoM

i found a way to do it for both ie6 and ff, not sure about ie7. i used spans and css.
if you know how a span works you should be able to get it. if not just ask and i can post the code i used.

though i haven't mastered the alignment completely, it still looks good just not exactly where i wanted it.


----------



## Tact

yah. give me a min to re-read this thread. this was a long time ago and whatever code i ended up using i still have on. (never changed it again afterwards cause it was so hard to make it work that when i finally did, i never wanna touch it again. )

let me check if i posted it. if not, i'll give you what i used. i do remember i was at one point looking at 3 diffrent methods testing each one to see which one i liked best. in the end the trouble was just me being nit picky about things that were off by 1 pixel and i used a workaround for this teeny image that was bugging me so you prolly won't struggle that much with it. 

brb whilst i skim over the thread again. 

ok. if i remember correctly. it looks like after a ton of work, i ended up going with creating the ILLUSION of what i wanted to accomplish but not the actuall thing? wierd. let me double check my site. it's offline though cause it was more of a hobby and i dont' wanna pay for hosting but i always have it on my hdd.

*back after some remembering of what i did*

ok. i remember now. yah. i was right. i gave up on it after a while and did a simple workaround of making it LOOK like it was transparent by cropping out the secion in the box i wanted and faded it in photoshop. it was the only way of making sure the text stayed opaque. i remember i didn't want to resort to that, but every other idea wasn't working for me.

here's me quoting myself


> so that's what it was. man. and to think that i already went through hours of trouble making it work by using a background image in the iframe to look like its still teh background image in the page. which i should have prolly done int he begining but didnt want to.
> 
> if i'm not to tired, i'll definately test it or isntead use it on somthing else cause i'm already done with that section on my site. lol. thanks though. i'm even more sure this will work if i ever need to apply such a setting again.
> 
> but for now. i'm satisfied wtih what i've done so far.


yah. basically i lost. lol. but the solutions given afterwards seem very promising. have you tried those?

if your background never moves, you can use my workaround. but if it does, then you'll definately need to try the solutions here. i think i actually made one work for another site i made. it ended up giving me an ugly scrollbar though if i remmeber. don't know if i fixed that...

if your box moves WITH the page, should be even easier. you prolly wouldn't even need the transparency at all. just make it look like its see through. easiest way imo.

btw is your box an iframe or something? cause that's what i tried to apply it on. i love iframes. even thoug they tell me not to use em cause not all browsers support em or whatever. whatever. i like em.


----------



## tGoM

here's the fix i came up with, although positioning isn't the way i wanted, i'm no css master.



Code:


div.trans {
	background-color:#14003a;
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
}
span {
	position:absolute;
	margin-left:5;
	margin-right:5;
	margin-top:3;
	margin-bottom:3;
	word-wrap: break-word;
}

<span name="header_span" id="header_span">Title or something goes here... <br>logo here maybe</span><div name="header" id="header" class="trans"></div>

this was in a td with it's own name and id tags, then i used javascript to resize the div to make it match the span or td height. could prolly just use the span height though.

hope this helps ...


----------



## MikeyB

heya

have been persuing the same problem myspef for the past few days

in the end, the only way I found to do it was to create two layers, and put exactly the same table in each. I gave one the <div style = "filter: opacity (50);"> treatment, and set the table cells to have a solid background colour. The other I gave no transparent style to, but put all of my text/images in. Hope that helps anyone else with the same problem. you can see the result at www.v-69.co.uk/pscu/index.html

the trick also works, but only in IE, not firefox :-(

Mikey


----------



## Lady-Rosesharana

I found this thread on google. There is a site called IMVU and I have seen many pages with semi transparent sectional backgrounds and images. I have looked through their source button to try to pick it out and failed. I have tried these codes and none have worked. help?


----------



## MMJ

Lmao, this thread doesn't seem to die.


----------



## Shiggity

that's because after four years, no one has had a good answer.


----------



## hi_itsme

I'm not sure... are you still in need of an answer.
I don;t know if this will work, but I suspect that this might work...
First, you have to use both 
filter: alpha(opacity=60);
AND opacity:0.6;
so the opacity will take in multiple browsers. (I think you know that, but...)
If your text is still being affected by that declaration, why don't you try nesting a div for the text. Like ...
Give #something an opaque background.
Then, #text can have background: transparent; and color: #foo;
I don't know, that's my best guess...


----------



## Pierre Geroudet

Hi

Why dont you use background-color: transparent ? in your frame. And if you want a fader, just put an other div which will herit ? I know this works with ff and opera. No idea for Ie.


----------



## bagby

I'm dealing with what I think is the same problem. Basically I want to have a fully opaque DHTML popup on top of a partially transparent page. I have seen this done on other sites and I'm having trouble recreating it.

I have a solution that works in FF but not IE. I think I have narrowed down the problem, which I will describe below. I'm using a combination of CSS and JS DOM.

So, I have a link:

Send message

and the JS:

function myPop(params) {
// build my DHTML popup using DOM
var popup = document.createElement("div");
...
// add element to document, outside main table
document.body.insertBefore(popup,document.body.firstChild);
// make main table of page partially transparent
var maintable = document.getElementById("maintable");
maintable.style.filter = "alpha(opacity=40)"; // IE
maintable.style.opacity = "0.4"; // FF & other CSS3 browsers
// set popup properties, would normally do this via regular CSS
popup.style.position = "absolute";
popup.style.margin = "300px auto";
// etc
}

This works great - in Firefox. The issue (I think) is that IE has problem with the absolute positioning. If the position is static, it shows up in IE at the top of the page, where you would expect it, but it really isn't a DHTML popup, which is what I want.

That's as close as I've gotten. Anyone else wanna take a crack at it?


----------



## dan66

The solution!

http://www.mandarindesign.com/troops.html#opacitybackgroundhard

Basically, the key is creating one div for the background and one separate div for the content (not contained in the background div), and then positioning them in the same place.


----------



## Tact

i found that link once too but i didn't understand how it worked. it just told you it does, and to copy and paste it. 

what has me confused is why -225? what does the minus do? send it beyond the viewing window on top? and then the position relative brings it back down? 

that is pretty neat. i notice this person has another method somewhere else on the page but i don't get that one either.


----------



## dan66

If it didn't have the -225, then the text would be directly below the image. The code is telling it to position itself 225 pixels higher than where it would normally go - which places it directly on top of the image. In some cases it might be easier to use absolute positioning - position the image and the text at the same spot on the page, and as long as the text div is defined outside of the image div, it won't inherit the opacity properties.


----------



## Tact

oh ok. now i get it. wow. it seems so simple.  i can't believe it took this long to figure out. X_X


----------



## ActuallyLaughing

It took you so long to do something simple; what is above is not the answer!

Note: The Following only works if you have access to background image!
 *For Background Colours*
1:Create A New Image (5x5) in Photoshop or Paint Shop Pro or The Gimp etc. (Not MSPaint)
2:Fill it with the colour you want
3:Set the layer or fill to the opacity you want
4:Save the image and upload it
5:Instead of


Code:


background-color: #000000;

It would be


Code:


background-image: url(http://www.domain.com/images/mybg.gif);

 *For Background Images*
1:Backup the original image if you want to use it as opaque later
2:Open it in Photoshop or wateva
3:Set the Opacity to wateva you want
4:Save the image and upload it
5:It would be


Code:


background-image: url(http://www.domain.com/images/mybgimage.gif);

Simple as that 

Works in ALL browsers


----------



## Tact

whhaattt?? 

are you litterally suggesting lowering the opacity in photoshop/gimp and saving it with the lowered opacity? and you think this will solve it? uh...i think you're mistaken. this only works if you save it as png. and even then, ie 6 doen'st support it. 

as a gif, you'll just get something ugly.


this wouldnt' work for a solid color OR a real image. 



the idea is to creat a semi transparent bg (image) using css, so that whatever is behind can still show through, and yet still have opaque text. if you were to put the text isnide the same div where you applied the transparency...you can't achieve this. which is why it was so difficult to solve.

the final solution actually is pretty clever in that the text is in a seperate from the affected div and you position the text OVER the semi-transparent area. it's not bad. and i could live with using that. so i'm happy with that "solution" as posted by dan.



and fyi. the faded bg idea you're suggesting was a workaround i ended up using and posted like years before in the previous page. i gave up on trying to achive this via css, and did exactly as you said. i had to save the image to make it LOOK like it was showing through the stuff from behind. but unless you have background-attachement fixed, this is NOT going to help at all.



so um...yah.


----------



## MMJ

Tact said:


> so um...yah.


haha, your posts always crack me up.


----------



## Tact

MMJ said:


> haha, your posts always crack me up.


haha. originally i had "so consider yourself owned, noob". but i was too chicken to leave it on cause the rules here are stricter than your average run of the mill community forum and i definately don't wanna break them cause i like and respect this place too much. (and namecalling is category III offense! )

i still did find it rather insulting though that he made an account with that username, and a reply with that title, as if to say we were all too dumb to figure this out. it's been a challenge for a reason. and he was of no real help whatesoever. that's why i wanted to say that. but i held it in and just put "so um...yah" instead.


----------



## MMJ

haha, yeah ok.


----------



## woahdae

This occurred to me, but maybe not to other users of this site, so I thought I would point it out. When you use relative positioning of the text, the space it used to take up is still there. This isn't apparent in the solution mentioned above because he doesn't have much text and extra spacing below the image doesn't matter.

http://www.mandarindesign.com/troops.html#opacitybackgroundhard

although dan66 is exactly right, positioning 2 divs in the same spot is the trick. In my opinion, a better way to do it would be to make the transparent div positioned absolutely inside a container with... well, I don't know what the technical term for it is - Whatever property that's set when a div has either relative or absolute positioning set on it. When this is the case, all absolutely positioned elements will be relative to the boundaries of its container. Thus, give some element relative positioning, then use the two div trick inside it. the semi-transparent div with absolute positioning will be layered relative to the corners of this container, but completely outside of the normal text flow. Thus, the second div will automatically display over the semi-transparent div because the semi-trans div is not a part of normal text flow.

There's one thing I can't figure out though. For this to work, the text div has to have relative positioning applied to it, but doesn't need any positioning modifications. Otherwise, the text will be much darker than it would have been without the trick, but will get just a little opacity from the background (in FF at least). Seems odd to me, but there's obviously something I don't understand about that property for which I don't know the name of that is applied when an element is given relative or absolute positioning.

With this approach, I was able to implement a semi-transparent table-based calendar showing through to a background image. Very pretty, and should be cross-browser. Thanks for the head start, all.

Here's an excerpt of my CSS that applies to the effect I'm describing:



Code:


td {
	width: 100px;
	height: 100px;
	vertical-align:top;
}

.transparent_background {
	width: 100px;
	height: 100px;
	position: absolute;
	background-color: green;
	opacity:.5;
	filter:alpha(opacity=50);
}

.text {
	position:relative;
}

After I came up with this, I found a forum with a similar solution, although it wasn't clear what was necessary and why it wouldn't work in opera. from http://www.ahfb2000.com/webmaster_help_desk/showthread.php?t=3318



Code:


<html>
<head>
<title>Transparent div</title>
<style type="text/css">
<!--
body {
     background:url(http://hstrial-dbayly.homestead.com/files/dog.jpg) no-repeat top left;
     margin:0;        
 }
#one {
       background:#ff0000;
     width:200px;
     height:216px;
     filter:progid:DXImageTransform.Microsoft.Alpha(opacity=20);
     -moz-opacity:0.20; 
     position:absolute;
     top:0;
     left:0;
 }
#two {
     width:200px;
     height:216px;
     position:absolute;
     top:0;
     left:0;
     font-family:arial;
     font-size:18px;
     color:#ffffff;
     padding:20px;
 }
//-->
</style>

</head>
<body>

<div id="one"></div>
<div id="two">
The text has to go in a separate div to the transparent  div. 
This effect will not work in Opera browsers.
</div>

</body>
</html>

I'd be interested to know in what ways people are using this solution, and in what situations it fails (and why). Thoughts?


----------



## gothiqueautumn

Seem's that this is the thread that will never die...

I actually have two issues so I'll go ahead and throw in the second non-related one just in case someone has a solution for that as well.

I'm creating a liquid layout with three coloumns and a header. 

Issue #1 I want to use the CSS rounded corners technique on the columns and header but I can't seem to figure out how to incorporate the layout with the rounded corners CSS and DIV's

Issue #2 (On the topic) I want the rounded corner technique to have transparency on the box but not the contents of the box. I've tried for hours and can't seem to figure this one out either. I tried photoshopping the 4 (and one time a fifth image based on using someone elses rounded corner technique) corner images with opacity and then putting it all together but this is the result I got. -> electrodollie.com/roundtest.htm

I suppose I could always just make an entire block image with rounded corners and opaque the whole thing but that requires me to make an individual image for each part which, and each time the content needs to be reduced or expanded. Or opaque and image and place a DIV with transparency over it and set it scroll on overflow but I detest haveing a page with any portion of it scrolling.

Can anyone help me with either of my issues I have here?

Thanks


----------



## Tact

i've done rounded corner things before too. but i used tables. (i did it way back when using tables for layout was totally ok )

i can't imagine how to pull it off with css/divs much less opacity as well. 

you could always just make the top and bottom images. so you have two pieces and not just one. and it should be able to stretch to whatever content is inside if you code it right. i'm thinking something like this..

[box wrapper]
{rounded corners top}
content that stretches 
to whatever lenght.
{rounded corners bottom}
[box wrapper]

something like that. in total it might end up having 3-4 divs total to pull it off. is that ok? i'm still learning css div's myself and not sure if theres a more streamlin/effecient way to do certain things.

that would just take care of the roundedness though. (if i understood you correctly)

as for transparency... maybe the solutions provided here could worth with it?


----------



## gothiqueautumn

Actually I ended up finding a solution I was just searching with the wrong keywords. This is what I found

http://www.schillmania.com/projects/dialog2/


----------



## striker0204

i know myspace is myspace, but it uses cSS and you can make transparent backgrounds using CSS in myspace. so it is possible.


----------



## frederiknb

I had the exact same problem not so long ago. See my solution here (works in Firefox, IE 6+7, Opera and Safari... Sadly not konqueror yet): http://prog.driversites.dk/?p=4


----------



## Tact

wow. that looks great, fred. i saved that link in my favs. definately something i'm gonna mess with when i get the chance. so a simple line can somehow make ie6 support it. omg >.<

the holy grail! lol

thanks for sharing. 

yet another great tool to use for the many situations one might find themselves in while trying to achieve a certain effect. woo hoo


----------



## tomdkat

Tact said:


> in the ifram tag blahblah.htm you would put this inside it like so:
> 
> blahblah.htm
> 
> and then in the actually html file tha you want IN the iframe, you would put this int he body tag:
> 
> this is cool and all, it only makes the background transparent but not the text,


I had already figured out the transparent background color but the "allowtransparency" attribute is EXACTLY what I've been searching for! Thanks! 

Peace...


----------



## Kentx

I've read every single response people have written, and they all involve DIV and IFRAME solutions. I need a sorta simple answer to the transparency question, HOWEVER, I am using a different design.

I have created a table with multiple rows and multiple cells, and its against a blank page with a normal background using a single image that is fixed with no repeating. I want the table to have a COLOR, preferring a light grey background for the WHOLE table, but having that color transparent by about 35-65%. Everytime I do this the following thing happens:

~ The entire table becomes transparent by that percentage, and normally that would be ok, BUT the text and form data (I am creating a form inside a table as well) is also that transparent.

I do not want to create an Iframe and there is no need for elaborate CSS. I jsut want a table with a colored background thats semi-transparent so it shows the image behind it. So how do we solve this? For reference I am using Frontpage to build it. Just please give me a straightforward answer because I've been looking for this solution forever. Thanks


----------



## tomdkat

Kentx said:


> I do not want to create an Iframe and there is no need for elaborate CSS. I jsut want a table with a colored background thats semi-transparent so it shows the image behind it. So how do we solve this? For reference I am using Frontpage to build it. Just please give me a straightforward answer because I've been looking for this solution forever. Thanks


Sounds like you're going to need some "elaborate" CSS. 

How about this: put the table in a DIV that has the background color you desire. Set the opacity of the color as you desire. Then, put the table inside the DIV and make sure the table has a transparent background.

I'll see if I can work up a quick example (if that will even work). 

EDIT: Ok, here is an example of what I *think* you want. 


Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Transparency with tables</title>
  <style type="text/css">
.content {
  display: block;
  width: 800px;
  height: 600px;
  margin-left: auto;
  margin-right: auto;
  background-color: #666666;
  opacity: 0.746;
}

td {
  height: 100px;
  text-align: center;
}


  </style>
</head>
<body
 style="background-attachment: fixed; background-repeat: no-repeat; background-image: url(../wallpaper/gates_of_hell_800x600.jpg); background-position: center top;">
<div class="content">
<table
 style="width: 75%; text-align: left; margin-left: auto; margin-right: auto;"
 border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td>Column #1</td>
      <td>Column #2</td>
      <td>Column #3</td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>
</div>
</body>
</html>

 Be sure to replace the background image with whatever image you choose. Adjust the opacity setting to control the transparency of the solid color background.

Peace...


----------



## Kentx

This doesnt work. The table doesnt turn transparent at all and the div has no coding for a background color that changes transparency. When I adjust this, there is an overlay of a giant grey square behind the text in the table that appears to be the same size of the background image. Are you sure the code you inserted last is the correct way of representing this div?


----------



## Kentx

The background shows through the table but the table entirely is transparent by a certain percentage. The main problem is everything INSIDE each cell needs to be 100% visable.


----------



## Kentx

This is the website for reference. Ignore the crappy form creation for the time-being, but the tables its located in NEEDS to be visable, but I want the table background to be light grey thats semi-transparent so you can see the background of the page.

http://movienewsletters.net/Projects/index.htm


----------



## tomdkat

Kentx said:


> This doesnt work. The table doesnt turn transparent at all and the div has no coding for a background color that changes transparency. When I adjust this, there is an overlay of a giant grey square behind the text in the table that appears to be the same size of the background image. Are you sure the code you inserted last is the correct way of representing this div?


Are you using IE to view the HTML I posted above, by chance?  I didn't test the HTML above in IE but it works perfectly in Firefox, Opera, and Safari (all 3 on Windows).

So, what you see is an IE "thing". Attached are some screenshots to demonstrate what the HTML above does.

I'll work up something for IE, if I can. 

Peace...


----------



## tomdkat

Kentx said:


> This is the website for reference. Ignore the crappy form creation for the time-being, but the tables its located in NEEDS to be visable, but I want the table background to be light grey thats semi-transparent so you can see the background of the page.
> 
> http://movienewsletters.net/Projects/index.htm


Ok, take a peek at the attached screenshots and let me know if this is what you're after.

Peace...


----------



## Kentx

The second thumbnail its PERFECT! How did you do that?? I also noticed that your using firefox. I am using IE7. Is that a problem??


----------



## tomdkat

Kentx said:


> The second thumbnail its PERFECT! How did you do that?? I also noticed that your using firefox. I am using IE7. Is that a problem??


Did you like "firefox-table2" or "firefox-table2b" or both? One (firefox-table2b) has less opacity applied to the image. Opera, Safari, and just about any other "modern" non-IE browser should render that image w/ opacity the same as Firefox does. I'll see if I can try it in IE 7 to see how my page looks.

How did I do it? I used "elaborate" CSS. 

Seriously, my solution isn't perfect and needs work but what I basically did was this:

Put the table inside a DIV.
Put a 10x10 jpg image of the color "lightgrey" (HTML Hex code #cccccc) in the DIV.
Set the "lightgrey" image to have a height and width of "100%". (Since it's a tileable image, it will scale nicely.)
I gave the table (the "table1" element, actually) a z-index of 5 and a top margin of "-100%". The z-index is needed to make the table appear "over" the "lightgrey" image and the top margin of "-100%" is needed to move the table to the top of the DIV it's contained in.
That's not 100% perfect but it's what you see in the screenshots I posted.

Peace...


----------



## Kentx

I liked the firefox table 2b one better, and would you mind putting the code up here? I am trying to tweak it for IE but its kinda difficult without reference


----------



## tomdkat

Ok, this isn't perfect but it should get you in the right direction:

Here is the CSS styling:


Code:


  <style type="text/css">
.style1 {
  font-size: 36px;
  font-style: italic;
  font-weight: bold;
}

#table1 {
  z-index: 5;
  position: relative;
  margin-top: -2128px;
}

#lightgrey {
  display: block;
  width: 100%;
  height: 2128px;
}

#background {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.60;

  /* To get opacity working in IE:  http://www.quirksmode.org/css/opacity.html */
  filter: alpha(opacity=60);
}

#lightgrey textarea, input {
  background-color: transparent;
}
  </style>

 The "style1" class was already in your HTML file. The other ids I added.

Here are the HTML changes I made:


Code:


<div id="lightgrey">
 <img src="lightgrey.jpg" id="background" />
  <table id="table1" border="1" cellpadding="0"  cellspacing="0" width="100%">




Code:


  </table>
  </div>

Adjust the opacity of the #background id to adjust the table background image.

That's it!

EDIT: I found how to get the opacity working in IE and updated the CSS above. 

Peace...


----------



## Kentx

Thanks! That worked better than I expected!


----------



## tomdkat

Great! Of course, you'll need to tweak it to get it exactly as you need but that shouldn't be too difficult. 

Just be sure to adjust the opacity setting for BOTH the "opacity" and "filter: opacity" attributes so all browsers apply the same amount. 

Good luck!

Peace...


----------



## mellojoe

Howdy, folks. A quick greeting from Arkansas.

Just wanted to say a huge 'THANK YOU' to everyone in this 634-year-old thread. I was trying out some different concepts for transparent DIV's and I couldn't seem to get them perfect.

The trick of having two separate DIV's that were positioned on top of each other works good for me. 

I can't believe how much around-and-around I went looking for this simple solution.

THANK YOU! :up:


----------



## citizensheep

In case it's relevant/useful, this post explains how I produced opaque text on a transparent background using two identical divs. It requires duplicate content and the transparency doesn't work in IE6, but it may be of interest.

Regards, Michael


----------



## tomdkat

citizensheep said:


> It requires duplicate content and the transparency doesn't work in IE6, but it may be of interest.


Would the opacity "filter" I commented on in post #59 on the previous page of this thread work in your method?

Peace...


----------



## citizensheep

tomdkat said:


> Would the opacity "filter" I commented on in post #59 on the previous page of this thread work in your method?


It probably would; I tend to avoid worrying about quirks mode if I can, but your solution certainly seems much cleaner.

Best wishes,

Michael


----------



## cutcopypaste

this thread is probably a bit of a treasure trove, though I'm a bit too dense to make sense of all of it heh..
I'm trying to achieve a similar effect in a wordpress theme using stylesheets (at www.radioslipstream.com/wp/ .. I have a 50% black 50% transparent image overlay right now which looks bad on many monitors) but I don't know how to work with divs etc would I have to do that in the php files themselves?


----------



## tomdkat

What is the actual effect you're looking for? Maybe you should start a thread in the web development forum on this and we can look into this there. If you could post a mockup of what you have in mind, that would help. 

Peace...


----------



## nico1et

first, i don't work with styles & all that stuff.. in fact, i'm usually just copying & editing stuff, & i don't have the time nor the patience to try to learn stuff that i'll barely if ever use.

i saw you answering the person who wanted almost the same thing i'm trying to do (although the page is set up quite differently). i'm working on a test page but i've looked everywhere & tried everything...with no luck.

i don't get all the styles stuff...i already have some styles stuff (to make the background fixed while the rest scrolls) on the top, so i have zero clue how you go about adding to that. in other words, i don't get it & my brain (& eyes) hurt too much to look at much info.

i've just been playing around on a test page, but you can probably see what i'm trying to do on this page (unless it's changed by the time you see this). it's got a fixed background, & a table that input shows up on over on the right there. currently it's got a black background. i don't like the blocky way it looks at all, & i'm trying to make the black somewhat transparent so that i can see the bg image thru it (but still be able to read the text well enough). i'm not set on colors yet...

could you possibly take a look at the coding that's in there & try to help me with a way to (easily) do this w/o me having to think too much about it? i mean it when i tell you that i'm stuck in the old html ways & i feel there should be a simpler way to do this, like "transparency=50%"... it's annoying that things aren't simple anymore. plus i need this (obviously) to work in firefox and IE, cuz some people still use that old one (IE).

here's the test page...saucer. i would be forever grateful if you could make this easy as possible on me..

thanks a bunch.


----------



## tomdkat

nico1et,

Could you start a new thread for your assistance request in the web development forum here? 

Thanks!

Peace...


----------



## nico1et

what can you expect for a newbie anyway?!


----------



## imergeandsee

I am trying to do the same thing as TAC T, and thus far I get everything FADING or Semi Transparent but I cant get the text to behave how i want in the iframe

Below is the html i have that does not work or go to this link:
http://www.imergeandsee.com/1819/1819reggaegold08officialrules.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Reggae Gold 2008 Contest Rules




<table width="750" height="1000" border="0" align="center" cellpadding="0" cellspacing="0" background="http://www.imergeandsee.com/1819/1819_sitebg.gif" style=:"filter>
[TR]
[TD]
http://www.imergeandsee.com/1819/1819reggaegold08officialrules.html
[/TD]
[/TR]
[/TABLE]


----------



## tomdkat

imergeandsee said:


> I am trying to do the same thing as TAC T, and thus far I get everything FADING or Semi Transparent but I cant get the text to behave how i want in the iframe
> 
> Below is the html i have that does not work or go to this link:


I'm confused as well.  How is the text misbehaving? It's loading just fine in the iframe for me. What's the problem?

EDIT: Also, could you start a new thread for this issue (if you haven't already) in the web design forum? Thanks! 

Peace...


----------



## Ragtube

tomdkat said:


> Ok, this isn't perfect but it should get you in the right direction:
> 
> Here is the CSS styling:
> 
> 
> Code:
> 
> 
> <style type="text/css">
> .style1 {
> font-size: 36px;
> font-style: italic;
> font-weight: bold;
> }
> 
> #table1 {
> z-index: 5;
> position: relative;
> margin-top: -2128px;
> }
> 
> #lightgrey {
> display: block;
> width: 100%;
> height: 2128px;
> }
> 
> #background {
> display: block;
> width: 100%;
> height: 100%;
> opacity: 0.60;
> 
> /* To get opacity working in IE:  http://www.quirksmode.org/css/opacity.html */
> filter: alpha(opacity=60);
> }
> 
> #lightgrey textarea, input {
> background-color: transparent;
> }
> </style>
> 
> The "style1" class was already in your HTML file. The other ids I added.
> 
> Here are the HTML changes I made:
> 
> 
> Code:
> 
> 
> <div id="lightgrey">
> <img src="lightgrey.jpg" id="background" />
> <table id="table1" border="1" cellpadding="0"  cellspacing="0" width="100%">
> 
> 
> 
> 
> Code:
> 
> 
> </table>
> </div>
> 
> Adjust the opacity of the #background id to adjust the table background image.
> 
> That's it!
> 
> EDIT: I found how to get the opacity working in IE and updated the CSS above.
> 
> Peace...


I really need help... How do I apply these changes to my entire "member's area" on my website with (http://i535.photobucket.com/albums/ee354/ragtube/RagTube.gif) as the picture. I have attached a copy of my members htm...Ragtube.com


----------



## tomdkat

Please start a new thread in the web development forum, if you haven't already.

Peace...


----------

