Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Stylesheet: background-image size relative to widget while keeping aspect ratio
Forum Update on Monday, May 27th 2025

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

Scheduled Pinned Locked Moved Unsolved General and Desktop
11 Posts 3 Posters 10.0k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • qwasder85Q Offline
    qwasder85Q Offline
    qwasder85
    wrote on last edited by qwasder85
    #1

    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:
    alt text

    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?

    1 Reply Last reply
    0
    • mrjjM Offline
      mrjjM Offline
      mrjj
      Lifetime Qt Champion
      wrote on last edited by
      #2

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

      qwasder85Q 1 Reply Last reply
      0
      • mrjjM mrjj

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

        qwasder85Q Offline
        qwasder85Q Offline
        qwasder85
        wrote on last edited by
        #3

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

        mrjjM 1 Reply Last reply
        0
        • qwasder85Q 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.

          mrjjM Offline
          mrjjM Offline
          mrjj
          Lifetime Qt Champion
          wrote on last edited by
          #4

          @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

          JonBJ qwasder85Q 2 Replies Last reply
          0
          • mrjjM 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

            JonBJ Offline
            JonBJ Offline
            JonB
            wrote on last edited by
            #5

            @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?

            qwasder85Q 1 Reply Last reply
            0
            • JonBJ 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?

              qwasder85Q Offline
              qwasder85Q Offline
              qwasder85
              wrote on last edited by
              #6

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

              JonBJ 1 Reply Last reply
              0
              • mrjjM 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

                qwasder85Q Offline
                qwasder85Q Offline
                qwasder85
                wrote on last edited by
                #7

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

                1 Reply Last reply
                0
                • qwasder85Q qwasder85

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

                  JonBJ Offline
                  JonBJ Offline
                  JonB
                  wrote on last edited by
                  #8

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

                  qwasder85Q 1 Reply Last reply
                  0
                  • JonBJ JonB

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

                    qwasder85Q Offline
                    qwasder85Q Offline
                    qwasder85
                    wrote on last edited by qwasder85
                    #9

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

                    JonBJ 1 Reply Last reply
                    0
                    • qwasder85Q 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.

                      JonBJ Offline
                      JonBJ Offline
                      JonB
                      wrote on last edited by
                      #10

                      @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?

                      qwasder85Q 1 Reply Last reply
                      0
                      • JonBJ 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?

                        qwasder85Q Offline
                        qwasder85Q Offline
                        qwasder85
                        wrote on last edited by
                        #11

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

                        1 Reply Last reply
                        0

                        • Login

                        • Login or register to search.
                        • First post
                          Last post
                        0
                        • Categories
                        • Recent
                        • Tags
                        • Popular
                        • Users
                        • Groups
                        • Search
                        • Get Qt Extensions
                        • Unsolved