Stylesheet: background-image size relative to widget while keeping aspect ratio

[qwasder85]

I would like my QGroupBoxes to feature a watermark in their bottom-left that is a certain percentage of the QGroupBox's width and keeps its 1:1 aspect ratio.

This is the effect I want to achieve:

Here is my stylesheet:

QGroupBox#simpleGroupBox
{
    border: 1px solid #cccccc;
    background-image: url(:/Images/watermark.png);
    background-position: bottom left;
    background-repeat: no-repeat;
}

Can this be done with stylesheets alone?

[mrjj]

Hi
Seems to work fine ?
Do you get other result ?

[qwasder85]

@mrjj It doesn't work with a large image that needs to be scaled down to the group box size, and it also doesn't scale when I resize the window.

[mrjj]

@qwasder85
Ah, sorry, i completely missed the scaling part.
As far as i know, scaling is not possible with background-image
but some seems to have used border-image instead
https://forum.qt.io/topic/40151/solved-scaled-background-image-using-stylesheet

[JonB]

@mrjj, @qwasder85

HTML CSS has background-size (e.g. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images, https://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only). Does this exist/work in QSS?

[qwasder85]

@JonB I think this does exist, but what would I set it to?

[qwasder85]

@mrjj Your linked thread seems to be the exact same issue. Thanks.
Doesn't seem clear whether or not it is actually possible with stylesheets only (which is what I would prefer). I'll try experimenting with border-image.

[JonB]

@qwasder85
Presumably (assuming it works) you would need to get the container (GroupBox) size in code, and then do an explicit setStylesheet() call?

[qwasder85]

@JonB That would work, though I'm trying to have this background apply to any groupbox used in my application automatically, without me having to touch it. That's why I want to solve this with stylesheets (I'm lazy and try to be efficient). :)
If it turns out it's impossible (right now it looks that way), there won't be a watermark, haha. I try to move away from setting dynamic stylesheets in code.

[JonB]

@qwasder85
I only know about the HTML/CSS3 size, I'm afraid. https://www.sitepoint.com/css3-background-size-property/ and https://stackoverflow.com/questions/5766825/css-scaled-background-image use background-size: cover OR contain;, but I don't suppose QSS will allow that?

[qwasder85]

@JonB Doesn't look like it. It seems to have no effect.