styling background image

[jdbruijn]

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:

Code: Select all

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:

Code: Select all

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

[Harjo]

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..

[jdbruijn]

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

[Harjo]

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?

[jdbruijn]

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