lmc148

Hi

I have my background, which is a photo of rich fabric:

body
{
background-image: url("fabric.jpg")
}

Then I have my content div:

div.content
{
background-color: #ffffeb;
border: 2px solid #660000;
padding: 3em;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom:10px;
}


which just slaps a box over the top of the background; it looks very harsh. Is there a way of fading them in CSS or do you have to do some clever thing in Photoshop (which I'm not clever at! )?

Thanks

Aso

You can use CSS transparency filters if that's what you are after, but I'm not sure of the extent of their support in various (older) browsers.

Otherwise, you can make a very big, semi-transparent PNG that you use as the background image of your content. Then the body background will appear to 'show through'.

If using the second method, you'll need a script such as IE PNG Fix to fix transparent PNG's in IE6

lmc148

Thanks. I've done it using CSS transparency. I've made the background transparent but then made the text/photos on top non-transparent. I must admit the non-transparent text does not look as crisp as normal though, this process changes it somehow.

(I don't understand the png option, so will stick to CSS).

Monie

Could I see the "fabric.jpg" image?
You can easily do a transparency PNG image using Photoshop. Let me do it for you

lmc148

Hi Monie

That's very kind of you, thanks for the offer. I've used CSS for the moment & at this stage I'm not sure the person concerned will even like it, so I'll wait & see first. Thanks.

Monie

Ok then... Wish you good luck