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

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??

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

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.

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);
}

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.

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

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.

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.

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;
}

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.

Try to use this code:

<img src="klematis.jpg" width="150" height="113" alt="klematis"
style="opacity:0.4;filter:alpha(opacity=40)" />
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.