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]

I'll try to answer my own question....please 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=50);

-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

 

[Laurent Bugnion [MVP]]

Hi,

I'll try to answer my own question....please 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=50);

-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="divBackground">
<img src="yourImage.jpg" />
<div class="divTextBackground"></div>
<div class="divText">Hello world</div>
</div>

with

.divBackground
{
}

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

.divText
{
font-weight: bold;
position: relative;
top: -80px;
}


HTH,
Laurent

 

[JJ]

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

JJ

Hi,

I'll try to answer my own question....please 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=50);

-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="divBackground">
<img src="yourImage.jpg" />
<div class="divTextBackground"></div>
<div class="divText">Hello world</div>
</div>

with

.divBackground
{
}

.divTextBackground
{
position: relative;
top: -50px;
background-color: White;
filter: alpha(opacity=50);
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