Transparency issue

HTML & CSS
1

Hi site point fans,

I have created a transparency so that I can see the background image. The issue I have is the div I have made transparent has an image inside of it and it is going transparent as well (I am assuming that it is inherent it from the parent)
but what I don’t know is how to stop it from happening anyone got any ideas?

2

Opacity is inherited by all child elements, and there’s nothing you can do about that except use tricky hacks, lie have the right column outside the #content-wrap div and absolutely place it where you want it.

A better solution is to use rgba colors instead, such as

#content-wrap {
  background-color: [COLOR="Red"]rgba(256,256,256,0.9)[/COLOR];
  float: left;
  height: 565px;
  padding: 0;
  width: 819px;
}

Only problem is, older browsers like IE<9 don’t get rgba.

So if that matters to you (it wouldn’t to me) you could use a slightly transparent background image on #content-wrap instead of a color.

3

Here is the simple hack/AP free way to get CSS opacity in all browsers (including the ie’s) without the child inheriting the parent. { visibility: inherit; } Cross Browser Modern CSS Opacity With RGBA

4

thanks for the reply

Amanti Coffee is the url.
The ‘free cost of equipment’ image should not be transparent

5

I don’t follow.

A div is transparent by default, so why assign an opacity value to it in the css to make it transparent.

Can you post the html and css you currently have.