make a object transparent.

[nats01282]

Hello i have a basic website with a background and a container that contains the writing, The background covers the whole page as the contains runs down the middle with a gap of 300px each side, i am after making my container around 30% transparent,

The container background is made up of 100px square repeated across the screen,

if you need any more info just ask, thank you

[colweb]

if you need any more info just ask, thank you

Okay, you have a background and a container. The container is 30% transparent and contains your content.
What is the question, problem??

[nats01282]

Okay, you have a background and a container. The container is 30% transparent and contains your content.
What is the question, problem??

i am asking how do i make the container transparent

[dottomm]

Try this for 60% transparency

/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;

Change the number values for +- transparency.

Notice there are two settings for two kinds of rendering engines.

[nats01282]

No none of them work, i am correct in saying that i just type that into my css style sheet were the container is,

e.g

#container
{
background-image:url(images/back.gif);
	/* for IE */
filter:alpha(opacity=60);
}

[colweb]

i am asking how do i make the container transparent

There are a lot of tricks and hacks found everywhere to do this. Most don't work with browser X or Y but do work with all the others.
The best way (in my opinion) is to use a transparent png file with the background color included. This png file is to be used as background in the div.

This site: http://www.ehow.com/how_2029201_png-photoshop.html explains not only how to create a transparent png with photoshop but also with some other programs.
And this site: http://entropymine.com/jason/testbed/pngtrans/ shows how all kind of different transparent png's look in browsers.

[nats01282]

There are a lot of tricks and hacks found everywhere to do this. Most don't work with browser X or Y but do work with all the others.
The best way (in my opinion) is to use a transparent png file with the background color included. This png file is to be used as background in the div.

This site: http://www.ehow.com/how_2029201_png-photoshop.html explains not only how to create a transparent png with photoshop but also with some other programs.
And this site: http://entropymine.com/jason/testbed/pngtrans/ shows how all kind of different transparent png's look in browsers.

That will be no good as as i have a funny shape background

[colweb]

No none of them work, i am correct in saying that i just type that into my css style sheet were the container is,

e.g

#container
{
background-image:url(images/back.gif);
	/* for IE */
filter:alpha(opacity=60);
}

This will never work. You want the container to be transparent but it contains a gif image as background. You can make a gif semi-transparent by using 1 color and setting every second pixel transparent. But I find the results most of the time not good.

[colweb]

That will be no good as as i have a funny shape background

Can you attach the background image you are using, maybe I can make a transparent png for you.

[dottomm]

No none of them work, i am correct in saying that i just type that into my css style sheet were the container is,

e.g

#container
{
background-image:url(images/back.gif);
	/* for IE */
filter:alpha(opacity=60);
}

Yes. Are you using IE? If you are using one of the CSS 3 compliant browers (not IE) you need to use

#container
{
background-image:url(images/back.gif);

opacity:0.6;
}

[dottomm]

Yes. Are you using IE? If you are using one of the CSS 3 compliant browers (not IE) you need to use

#container
{
background-image:url(images/back.gif);

opacity:0.6;
}

You know. I just realized what you are trying to do. You can not have a transparent background with a background-image. The image will cover up the container background-color, which is what you are setting with opacity.

You need either a slightly transparent image for the background OR a background color with the opacity set to your choosing.

[dawn.visp]

Try to use this code:

<img src="klematis.jpg" width="150" height="113" alt="klematis"
style="opacity:0.4;filter:alpha(opacity=40)" />