Background image opacity in Servoy 6

Classic Servoy
1

Hello,

How would I do to set the opacity of a background image defined for the body part of a form without affecting other elements on that form ?
I tried several settings through my css stylesheet, but I can"t find a way around, everything on that form is rendered opaque.

Here’s where I am so far

	body.bkgrd{
 
           background-image: url("media:///myimage.jpg");
	         background-color: grey;
	         background-color : rgba(1,1,1,0.1);
	         opacity: 0.4;
	         background-repeat:no-repeat;
	         background-position: center;
	         background-size: cover;

      }

Thanks

2

The opacity property by definition applies to the block element, not the background image. What you need is a background-opacity property but it doesn’t exist yet.

The solution is to put a label on your form that fills the body part (with anchors as needed), send it to the back, and set its style class to:

label.img-background {
	background-image: url("media:///myimage.jpg");
	background-color: grey;
	background-color: rgba(1, 1, 1, 0.1);
	opacity: 0.1;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
3

Thank you David,

that’s the solution I came up with also

Ugo