setting a label background image via css?

mboegem · August 7, 2008, 10:49am

Is there a way to put a background image on a label via the css?

At this moment I have to use the textproperty & HTML to do this.

%%i18n:lbl.organisation%%

-----

It seems that ‘regular’ css supports this with a command like: background-image: url(<>), but it doesn’t seem to work in Servoy.

If anyone knows the trick: please! It would save me a lot of time.

ROCLASI · August 7, 2008, 11:25am

Hi Marc,

You can use the following syntax:

background-image: media:///bg_img.png

And to add repetition you can use:

background-repeat: repeat-x;

Hope this helps.

mboegem · August 7, 2008, 12:28pm

Hi Robert,

did you get this to work in 3.5.6?

I just tried it, but nothing happens:

label.header_stbl
{
	background-image: media:///bg-img.png;
	color: #393939;
}

Thnkx

ROCLASI · August 7, 2008, 12:42pm

Hi Marc,

I use this technique inside HTML areas. If you try using it as a Servoy style I don’t think this will work.
Try using it inside the HTML itself.

Hope this helps.

mboegem · August 7, 2008, 12:48pm

Try using it inside the HTML itself.

that works indeed, but this was also the thing I wanted to avoid. As I have to change this on a lot of elements…

Thnkx anyway!

jcompagner · August 14, 2008, 3:57pm

this is currently not supported and i dont know if that is easy to do for us
Because we then need to preparse the css that is send to the client and rewrite it so that the url is converted to something the browser understands.

you can make a case for this so that we can look into this if it is possible

label.header_stbl
{
   background-image: media:///bg-img.png;
   color: #393939;
}

jbader · December 4, 2009, 5:09pm

Hello,

Does this now work in Servoy 5? Can media via CSS be repeated in a label?

jcompagner · December 7, 2009, 9:58am

background css images do work now in web and smart client
Repeat isnt working (smart has no support for that at all and you can try if it somehow does get picked up at the web)

but it is set at most places as no-repeat by servoy so that web and smart are in sync.

Gordon · December 28, 2009, 11:21am

jcompagner:
background css images do work now in web and smart client
Repeat isnt working (smart has no support for that at all and you can try if it somehow does get picked up at the web)

but it is set at most places as no-repeat by servoy so that web and smart are in sync.

Hi
Can I confirm that applying the background image to a label should allow you to add text to the label and this render in front of the background image. This works faultlessly in the web client, but in the smart client the label text is obscured by the background image.

What I would like to be able to do is to use the background image as a button state and have the text change dynamically over the top depending on the user selection.

Thanks and a very happy and prosperous new year to everyone…

maria · November 10, 2010, 12:15am

mboegem:
Hi Robert,

did you get this to work in 3.5.6?

I just tried it, but nothing happens:
label.header_stbl

{
background-image: media:///bg-img.png;
color: #393939;
}




Thnkx

Hi Marc,

Does it mean that we have to import the image in solution before we can ship it?
How about branding then? The image should be different for each customer, so we should be able to replace the picture in the filesystem without re-building the solution.
I tried to use ```
background-image: url(path/logo.png);

If I use url(./logo.png) - what location is that supposed to be?

Cheers,
Maria

mboegem · November 10, 2010, 7:54am

maria:
Does it mean that we have to import the image in solution before we can ship it?

seems the background image via css can’t be an uri then…

But: there are other possibilities:
a) don’t use a styleclass, but implement this via the textsetting of a label , this supports uri (that’s how we did it anyway, because it gives you far more control over ie. resize properties).
b) use a ‘general’ reference to the media library, ie. media:///branding.png and set the correct image in this media item during startup via the solutionModel.
I didn’t test this last one, but it should be able to work.

maria · November 11, 2010, 3:41am

mboegem:

maria:
Does it mean that we have to import the image in solution before we can ship it?

seems the background image via css can’t be an uri then…

But: there are other possibilities:
a) don’t use a styleclass, but implement this via the textsetting of a label , this supports uri (that’s how we did it anyway, because it gives you far more control over ie. resize properties).
b) use a ‘general’ reference to the media library, ie. media:///branding.png and set the correct image in this media item during startup via the solutionModel.
I didn’t test this last one, but it should be able to work.

Thanks Marc.
a) worked for me

Karel_Broer · January 27, 2011, 1:03pm

jcompagner:
background css images do work now in web and smart client
Repeat isnt working (smart has no support for that at all and you can try if it somehow does get picked up at the web)

but it is set at most places as no-repeat by servoy so that web and smart are in sync.

label.normal
{
	font-family: Tahoma, sans-serif;
	font-size: 9pt;
	text-align: center;
	color: #555555;
	background-image: media:///ui_top_bar.png;
}

The image is working, but the text in the label is not displayed. It looks like the background image is on top of the text, instead of below the text.
This is not expected behaviour, I think. Could this be changed?

mboegem · January 28, 2011, 2:25pm

Karel Broer:
Code: Select all
label.normal
{
font-family: Tahoma, sans-serif;
font-size: 9pt;
text-align: center;
color: #555555;
background-image: media:///ui_top_bar.png;
}

The image is working, but the text in the label is not displayed. It looks like the background image is on top of the text, instead of below the text.
This is not expected behaviour, I think. Could this be changed?

But that’s logical behaviour: try to change the name of your background-image to ‘ui_behind_bar.png’ to get it behind your text… :lol: :lol: :lol:

Karel_Broer · January 28, 2011, 2:45pm

mboegem:
[But that’s logical behaviour: try to change the name of your background-image to ‘ui_behind_bar.png’ to get it behind your text…

Ahahahaha! Great thinking Marc! :lol:

maria · February 1, 2011, 3:16am

The problem is still there.

maria · April 20, 2011, 12:16am

Gordon:
Hi
Can I confirm that applying the background image to a label should allow you to add text to the label and this render in front of the background image. This works faultlessly in the web client, but in the smart client the label text is obscured by the background image.

What I would like to be able to do is to use the background image as a button state and have the text change dynamically over the top depending on the user selection.

Thanks and a very happy and prosperous new year to everyone…

Could anyone confirm the above? I still can’t get a label text to be displayed over the label image.

Cheers,
Maria

Topic		Replies	Views
background images in CSS Classic Servoy	3	2675	February 12, 2006
Images in CSS, Servoy 4.1 Classic Servoy	7	3946	May 4, 2010
Label text disappears Classic Servoy	1	1564	December 9, 2010
Two questions about images & css Classic Servoy	2	2012	June 17, 2010
Background image not working properly in SmartClient Classic Servoy	5	2770	September 17, 2010

setting a label background image via css?

At this moment I have to use the textproperty & HTML to do this.

Related topics