Hi

I started revamping an old webpage using no tables, with CSS. its the first time i have done it, and i have to say... i have fallen in love LOL. since i was trying new things, i started using "includes" with PHP aswell... yup... fell inlove again lol

anyway... why i am posting here is because of this..

i am using transparent divs so i can see the background image through them. is there a way i can make the div transparent, but not make the text and images transparent?

example here www.prophecyguide.netsb.com

any help would be appreciated.

div {
background-color:transparent;
}

Actually, if you don't specify any background color on the div, it's going to be transparent anyway.

First I'm glad you joined us on the css side of things. Once you get the hang of it you can see how powerful and easy it is to use. The php includes are also a great way to manage a site.

With the trasparent div you can do just what Chris posted above. LadynRed is right though that you don't need to specify the background-color as transparent since it's the default behavior.

If you specified a background-image then you may need to add the transparent. I think using a background-image may override the default, but I'm not sure.

Thanks for the replies

the problem i am having is that i did specify a background colour, but have set it to 50% opaque, so i could have the div as a different colour to the background but still be able to see the background. my problem is i dont want the text and pics to be opaque aswell.

static

Unfortunately if you give a div opacity everything inside the div inherits the opacity. I don't think there's any way around it at the moment. At least I haven't come across one. I'm going to hope like you that someone else here knows of a way since it's something I've wanted to use, but have run into the same problems you're having.

put a span inside the div and style it to return the opacity to "normal". Though you may find you have to use 200% as the value, because 100% of the inherited 50% is still 50% (only a theory not tried it BTW)

I thought that anything inside the div would inherit the transparency of that div and it couldn't be overwritten. I think it's issues in the way browsers handle transparency. I'd like to test out your theory though.

It's been awhile since I tried and thought I had dome something like you're suggesting without success. It has been awhile though and the idea sounds right so maybe it's worth experimenting again.

i think what christ said is right, adding a new div with a stile inside a div, it like breaks it off, so you can have background color black of the main div, and then the background color of the div inside say white. i could be wrong hehe

You're right about the colors, but I was always under the impression the opacity you set gets carried to the inner div. I'm not entirely sure though so it's something to try and see.

Originally Posted by vangogh

If you specified a background-image then you may need to add the transparent. I think using a background-image may override the default, but I'm not sure.

If you use CSS 2.0 syntax:

background: (background-color) (url) (repeat) (positions);

or example:

background: #000 url(blah.jpg) repeat-y top left;

In thise case he can do:

background: url(image/bg_img.jpg);

What this says is:

The default background color of the div will be transparent, if specified, until the image is loaded into the background the default background-color will apply.

The url obviously will be the background image.

If not specified I believe the bg image automatically repeats on its Y and X axis, so if you dont want it tiled left to right or top to bottom make sure to specify no-repeat.

the positions are obviously where you want your bg image to align to. I have known some people to make buttons larger than the actual size and then change the bg image position using, left, bottom, etc and perform an image rollover effect.


If the div you are using that has the text in there has no bg image, simple do not put anything for a background-color.

According to w3.org rules though if you state a text color: color: #FFF (This is the shortened version of White. in CSS 2.0 you can use shortened hex color values and it will still give the same results: ie: #000 is black) you must state the background-color with it. In this case you can always use: background: transparent;

Your validation may or may not complain when using: background: transparent; in which case you can use the stated above: background-color: transparent;

Chris I think everything you're saying is correct, but if I'm understanding the issue Static has I think it's a different one from what you're describing.

I think here the issue is that a background-color is set and given an opacity 50% normal. That works fine on the div, but it also affects the text and images inside the div.

I think when you give a div any kind of opacity then everything inside that div will inherit that same opacity. So I could set the opacity to 50% and then try to set the opacity for a paragraph or another div inside back to 100%, but the paragraph or inner div would still have 50% opacity. I think even trying to compensate by giving the inside elements 200% still has no effect.

I've tried this myself on several occasions with the same results each time. Admittedly I haven't tried every possible combination of elements and opacities, but I have tried a few and the inner elements always inherit the opacity of the outer div.

If someone knows a way around this I would love to hear it. It's the one thing keeping me from using opacity more in designs.

Originally Posted by vangogh

Chris I think everything you're saying is correct, but if I'm understanding the issue Static has I think it's a different one from what you're describing.

I think here the issue is that a background-color is set and given an opacity 50% normal. That works fine on the div, but it also affects the text and images inside the div.

I think when you give a div any kind of opacity then everything inside that div will inherit that same opacity. So I could set the opacity to 50% and then try to set the opacity for a paragraph or another div inside back to 100%, but the paragraph or inner div would still have 50% opacity. I think even trying to compensate by giving the inside elements 200% still has no effect.

I've tried this myself on several occasions with the same results each time. Admittedly I haven't tried every possible combination of elements and opacities, but I have tried a few and the inner elements always inherit the opacity of the outer div.

If someone knows a way around this I would love to hear it. It's the one thing keeping me from using opacity more in designs.

Alright you are correct with saying that all the child elements inherit it's parent values, especially opacity. What I'm saying is you need TWO div's to make this work. For example (I avoided the CSS and used styles just to show you...normally they would be id's or classes):

<div style="-moz-opacity: 0.5; background: url(images/bg.gif);" id="opaque_div">
    <div style="-moz-opactiy: 1" id="solid_div">
          Text in here is fully visible because this is considered the child of solid_div and inherits the full opacity of solid_div.
   </div>
</div>

See you have to have a sort of counter child that goes along with this. HOWEVER, I have had issues with Opera...Opera works a lot differently with opacity than other browsers... but FF1/2, IE 5/6/7 I have no problem with at all.

Hmm? It still doesn't work for me. Try reducing the -moz-opacity on the outer div to 0.1. When I do that the text in the inner div fades away too.

When I first tried working with opacities I had thought they were working well, until I made things more transparent. Even at 0.5 opacity you can still read the text fairly well, but if you look closely it's lighter than usual. It seems fine at first glance, but a closer inspection shows the text has had it's opacity reduced as well.

Please prove me wrong here, because I'd really like you to be right with this. I've been wanting to use opacity more ever since I first knew it existed.

did anybody figure this out? i have the exact same problem, i guess instead of a background color that is partially transparent i could use an image of the color that would get tiled and make just that bg image transparent then? it would be a crummy hack though...

And not really transparent. I'm pretty sure that it can't be done at the moment. I think it's supposed to work, but the browsers are misinterpreting it.

If someone does know how to add transparency to one div and have one of it's child divs go back to full opacity please share.