Fading the content div into the body background-image?

[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

[aso186]

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