styling background image

Classic Servoy
1

I want a background image (that has a wave patern) to be set as repeat to fill the entire height of my menu form.
I added label to my form and anchored it to top,bottom and left. This label has default settings and a special styleClass, that style class has the following definition:

label.golf_verticaal
{
	background-repeat: repeat-y;
	background-image: url(media:///golf_verticaal.png);
}
label
{
	color: #5c5c5c;
	border-style: none;
	font: bold 10pt Verdana;
	text-align: center;
}

However when I run this in my webclient (using FireFox) than the image is not repeated. Using Firebug I noticed that the following top-most style was overruling my style class:

element.style {
background-image:url("resources/servoy/media?id=golf_verticaal.png&s=pron&l=697963613");
background-position:center center;
background-repeat:no-repeat;
white-space:nowrap;
}

What am I missing here? Is the repeat setting in CSS not supported? Because looking a bit closer I noticed that it is never used, not even in the menu bars that have background image with 1px width. It seems that it is stretching that image instead of using a repeat-x or repeat-y styling.

Jos

2

as far as I know, this does not work in ‘servoy-styles’ : background-repeat: repeat-y;

you have to do that on the element itself, media properties: reduce & enlarge, without aspect ratio…

3

Setting the media properties to Reduce/Enlarge does not make the image repeat itself, but it stretches the image instead.

4

ah I see what you mean, we use 1px images, for gradients etc…
than you cant see the difference between stretch & repeat…

repeat is than indeed not working… did you filed a feature request?

5

Not yet, I thought i was doing somehting wrong.
But I will make a case for it.