transparent background

[sing1ejack]

I want to put text in a scrollable div tag and I want the background to be 50% transparent. But if I set the css opacity for the div tag, the text and the scrollbar also becomes transparent. I've been playing with placing an exmpty div or span tag under the div, but have had no luck yet. I'm new to css - can anyone offer some suggestions?

My goal is simillar to this example.

[Wickham]

Unfortunately if a containing div has opacity less than 1.0, elements inside cannot return to an opacity of 1.0, they always inherit the opacity value. Opacity sets the opacity value for an element and all of its children.

That means that if a div has a background image and the div has opacity less than 1.0 to set the opacity of the background image everything inside the div will also have opacity less than 1.0.

The safest way is to photo/image software to create a background image with the opacity and put it as a background-image in a div with no opacity setting.

However, it is possible to use the opacity settings if one div has the opacity and another without opacity has the text and scrollbar but also has position: absolute to take it out of the normal flow and it is not coded within the div with the opacity.

The div with background opacity and the div with scrolling, text and no opacity should both be contained in a div with position: relative if required to flow with other content on the page and not be affected by increased text size. If not in a position: relative div the position: absolute div would stay where it was while the other moved.

See item 3c: http://www.wickham43.supanet.com/tutorial/opacity.html which also has a scrollbar if you increase text size.