I would do something like this. (not tested at all so i dont know if
this works, but it should)
<div style="background:#f00, url(bg.png)">
<div style="margin: 5px; background: #000";color:#f00>
<!--replace 5px with whatever size the shadow part of the
bg.png is. if the shadow is different sizes on the different sides
just do e.g margin:1px 2px 3px 4px-->
<p>test</p>
</div>
</div>
On Mar 27, 2:05 pm, bmatzner <[EMAIL PROTECTED]> wrote:
> Hi,
>
> this isn't a jQuery question by nature, but I've searched the net for
> a while now for a suitable solution with no success, so perhaps the
> knowledgable folks here may have a hint for me.
> Here's the problem:
>
> I have an element (div) to which I would like to apply a png
> background image with rounded corners on a transparent background,
> i.e. the outer pixels of the image have an alpha channel shadow. I
> want the background of the element to show through on these outer
> pixels.
>
> The image is dark, and I want the text inside the element to be white.
> #element{
> background: url("bg.png");
> color: #ffffff;}
>
> Now if I turn images off, the text is displayed white on my white page
> background.
>
> If I add a background color
> #element{
> background: url("bg.png") #000000;
> color: #ffffff;}
>
> it looks fine with images off, but with images on, the black will show
> through around the corners of my background image.
>
> Here's the question: how can I apply the background color only if
> images are turned off (or the other way around: change the foreground
> color to white only if images are enabled. Or, another approach: how
> can I force the background color to not show through the transparent
> element?
>
> Thanks for any ideas,
> Bernd
