Hi Ariel,

great idea, and with some additional tweaking it will work, as the
background image indeed has a gradient, so I need to apply it twice,
that's what I couldn't come up with by myself.

<div style="background: url(bg.png) transparent">
    <div style="margin: 0px 3px 3px 3px; background: url(bg.png)
black; color:white">
         <p>test</p>
    </div>
</div>

This IS additional markup, but it will work - great. Thanks for
helping!
And thanks for excusing the abuse of this list...

Bernd


On 27 Mrz., 22:14, Ariel <[EMAIL PROTECTED]> wrote:
> 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

Reply via email to