Combining images and text

[JJ]

I want to display an image with some text overlay
Both the image and text will be retrieved from a database, so I have to
combine them at run-time.

Is there a way to do this?

TIA
JJ

[JJ]

Let me change that question.
This is what I really want:

I want to display an image, overlaid with a semi transparent 'box' with some
clickable text in it.
Both the text and the image will come from a database.

How could I do this? Can I set panels to be partially transparent perhaps?

TIA,
JJ


"JJ" <ab*@xyz.comwro te in message
news:%2******** *******@TK2MSFT NGP06.phx.gbl.. .

>I want to display an image with some text overlay
Both the image and text will be retrieved from a database, so I have to
combine them at run-time.

Is there a way to do this?

TIA
JJ

[JJ]

I'll try to answer my own question....ple ase correct me if you know a better
way:

I created two panels - one large one for the background image and one
smaller one within it.

In the smaller one I added my label which will hold the text.

I then set the background image of the larger panel to my database image. I
set the style of the inner panel to:

background-color: #ffffff;

filter: alpha(opacity=5 0);

-moz-opacity: .5;

This makes the inner panel 50 per cent transparent and achieve the desired
effect.

The only problem is that it ofcourse fades the text also, so it is never
possible to achieve completely black text

I'll see if anyone suggests another way, or has any comments on this
method....

JJ
"JJ" <ab*@xyz.comwro te in message
news:%2******** **********@TK2M SFTNGP04.phx.gb l...

Let me change that question.
This is what I really want:

I want to display an image, overlaid with a semi transparent 'box' with
some clickable text in it.
Both the text and the image will come from a database.

How could I do this? Can I set panels to be partially transparent perhaps?

TIA,
JJ


"JJ" <ab*@xyz.comwro te in message
news:%2******** *******@TK2MSFT NGP06.phx.gbl.. .

>>I want to display an image with some text overlay
Both the image and text will be retrieved from a database, so I have to
combine them at run-time.

Is there a way to do this?

TIA
JJ

[Laurent Bugnion [MVP]]

Hi,

JJ wrote:

I'll try to answer my own question....ple ase correct me if you know a better
way:

I created two panels - one large one for the background image and one
smaller one within it.

In the smaller one I added my label which will hold the text.

I then set the background image of the larger panel to my database image. I
set the style of the inner panel to:

background-color: #ffffff;

filter: alpha(opacity=5 0);

-moz-opacity: .5;

This makes the inner panel 50 per cent transparent and achieve the desired
effect.

The only problem is that it ofcourse fades the text also, so it is never
possible to achieve completely black text

Since opacity will be also applied to the children, what you can do is
take the text out of the "inner panel" hierarchy and use relative
positioning.

For example:

<div class="divBackg round">
<img src="yourImage. jpg" />
<div class="divTextB ackground"></div>
<div class="divText" >Hello world</div>
</div>

with

.divBackground
{
}

.divTextBackgro und
{
position: relative;
top: -50px;
background-color: White;
filter: alpha(opacity=5 0);
opacity: 0.5;
height: 30px;
}

.divText
{
font-weight: bold;
position: relative;
top: -80px;
}
HTH,
Laurent
--
Laurent Bugnion [MVP ASP.NET]
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch

[JJ]

Ofcourse - I didn't think of that. Thanks.

JJ

"Laurent Bugnion [MVP]" <ga*********@bl uewin.chwrote in message
news:u$******** *****@TK2MSFTNG P06.phx.gbl...

Hi,

JJ wrote:

>I'll try to answer my own question....ple ase correct me if you know a
better way:

I created two panels - one large one for the background image and one
smaller one within it.

In the smaller one I added my label which will hold the text.

I then set the background image of the larger panel to my database image.
I set the style of the inner panel to:

background-color: #ffffff;

filter: alpha(opacity=5 0);

-moz-opacity: .5;

This makes the inner panel 50 per cent transparent and achieve the
desired effect.

The only problem is that it ofcourse fades the text also, so it is never
possible to achieve completely black text

Since opacity will be also applied to the children, what you can do is
take the text out of the "inner panel" hierarchy and use relative
positioning.

For example:

<div class="divBackg round">
<img src="yourImage. jpg" />
<div class="divTextB ackground"></div>
<div class="divText" >Hello world</div>
</div>

with

.divBackground
{
}

.divTextBackgro und
{
position: relative;
top: -50px;
background-color: White;
filter: alpha(opacity=5 0);
opacity: 0.5;
height: 30px;
}

.divText
{
font-weight: bold;
position: relative;
top: -80px;
}
HTH,
Laurent
--
Laurent Bugnion [MVP ASP.NET]
Software engineering: http://www.galasoft-LB.ch
PhotoAlbum: http://www.galasoft-LB.ch/pictures
Support children in Calcutta: http://www.calcutta-espoir.ch