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. QScrollArea repeats background image
Forum Update on Tuesday, May 27th 2025

QScrollArea repeats background image

Scheduled Pinned Locked Moved Unsolved General and Desktop
12 Posts 4 Posters 844 Views 1 Watching
  • 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.
  • SGaistS SGaist

    Hi and welcome to devnet,

    Your requirement is not clear. As you are doing now, you are setting the background on all the widgets that are children on the "containing" widget yet you seem to only want the to have that background applied to said "containing" widget. What exactly do you want to achieve ?

    C Offline
    C Offline
    cr00se
    wrote on last edited by
    #3

    @SGaist

    // Dummy widget
    QWidget* widget = new QWidget;
    widget->setStyleSheet("background-image:url(:/Resources/background.png)");
    

    I created a dummy widget and set to it background image and QVBoxLayout
    I add new objects to QVBoxLayout -> objects appears in scroll area

    Each new object moves down background image more and more

    Why background repeats or moves
    Objects must appear, and the background must be static

    This is what happened gif

    SGaistS JoeCFDJ 2 Replies Last reply
    0
    • C cr00se

      @SGaist

      // Dummy widget
      QWidget* widget = new QWidget;
      widget->setStyleSheet("background-image:url(:/Resources/background.png)");
      

      I created a dummy widget and set to it background image and QVBoxLayout
      I add new objects to QVBoxLayout -> objects appears in scroll area

      Each new object moves down background image more and more

      Why background repeats or moves
      Objects must appear, and the background must be static

      This is what happened gif

      SGaistS Offline
      SGaistS Offline
      SGaist
      Lifetime Qt Champion
      wrote on last edited by
      #4

      @cr00se can you provide a complete minimal example that shows this ?

      By the way, which version of Qt are you using ?

      Interested in AI ? www.idiap.ch
      Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

      C 1 Reply Last reply
      0
      • C cr00se

        @SGaist

        // Dummy widget
        QWidget* widget = new QWidget;
        widget->setStyleSheet("background-image:url(:/Resources/background.png)");
        

        I created a dummy widget and set to it background image and QVBoxLayout
        I add new objects to QVBoxLayout -> objects appears in scroll area

        Each new object moves down background image more and more

        Why background repeats or moves
        Objects must appear, and the background must be static

        This is what happened gif

        JoeCFDJ Offline
        JoeCFDJ Offline
        JoeCFD
        wrote on last edited by
        #5

        @cr00se how about
        scroll_area->setBackgroundImage(":/Resources/background.png"); ?

        C 1 Reply Last reply
        0
        • JoeCFDJ JoeCFD

          @cr00se how about
          scroll_area->setBackgroundImage(":/Resources/background.png"); ?

          C Offline
          C Offline
          cr00se
          wrote on last edited by
          #6

          @JoeCFD
          I tried this too. It has the same result.

          1 Reply Last reply
          0
          • B Offline
            B Offline
            Bonnie
            wrote on last edited by Bonnie
            #7
            //let the stylesheet only affects QScrollArea, not its child widgets (or any other widgets)
            setStyleSheet("QScrollArea{background-image: url(:/Resources/background.png);background-repeat:no-repeat;background-attachment:fixed;}");  
            
            //must be added after calling "scroll_area->setWidget(widget)" or the child widget's background color will cover the image
            widget->setAutoFillBackground(false); 
            
            C 1 Reply Last reply
            0
            • SGaistS SGaist

              @cr00se can you provide a complete minimal example that shows this ?

              By the way, which version of Qt are you using ?

              C Offline
              C Offline
              cr00se
              wrote on last edited by
              #8

              @SGaist
              I'm using Qt6

              This is minimal structure:

              //Dummy widget
              QWidget* widget = new QWidget;
              widget ->setStyleSheet("background-image:url(:/Resources/background.png)");
              
              // layout 
              QVBoxLayout* layout = new QVBoxLayout;
              layout->setSpacing(20);
              layout->addStretch(10);
              widget->setLayout(layout);
              
              // Set widget to scroll area
              scroll_area->setWidgetResizable( true );
              scroll_area->setWidget(widget);
              

              This is how I add new objects to layout

              // If you press the button, this will be called
              layout -> addLayout ( AddObject() )
              
              QHBoxLayout* AddObject(...)
              {
                  QHBoxLayout* templayout = new QHBoxLayout;
                  QLabel* lbl = new QLabel("Some Text");
              
                  templayout ->addWidget ( lbl  );
              
                  // Scroll to bottom
                  scroll_area->verticalScrollBar()->setMaximum( scroll_area->height() + lbl->sizeHint().height() + 20 );
              
                  scroll_area->verticalScrollBar()->setValue(scroll_area->verticalScrollBar()->maximum());
              
                  return templayout;
              }
              
              1 Reply Last reply
              0
              • B Bonnie
                //let the stylesheet only affects QScrollArea, not its child widgets (or any other widgets)
                setStyleSheet("QScrollArea{background-image: url(:/Resources/background.png);background-repeat:no-repeat;background-attachment:fixed;}");  
                
                //must be added after calling "scroll_area->setWidget(widget)" or the child widget's background color will cover the image
                widget->setAutoFillBackground(false); 
                
                C Offline
                C Offline
                cr00se
                wrote on last edited by
                #9

                @Bonnie
                Unfortunately It doesn't work (
                I tried all combinations with that

                B 1 Reply Last reply
                0
                • C cr00se

                  @Bonnie
                  Unfortunately It doesn't work (
                  I tried all combinations with that

                  B Offline
                  B Offline
                  Bonnie
                  wrote on last edited by Bonnie
                  #10

                  @cr00se It will work, have you read my comments? The point is not the combinations but the selector.
                  What you tried is just wrong because you always have background image for the dummy widget, which would of course scroll with it.
                  As I said, you must set the background stylesheet to affect only QScrollArea itself, not any other widgets, including the dummy widget.
                  According to your latest code, just change to

                  //Dummy widget
                  QWidget* widget = new QWidget;
                  
                  // layout 
                  QVBoxLayout* layout = new QVBoxLayout;
                  layout->setSpacing(20);
                  layout->addStretch(10);
                  widget->setLayout(layout);
                  
                  // Set widget to scroll area
                  scroll_area->setWidgetResizable( true );
                  scroll_area->setWidget(widget);
                  scroll_area->setStyleSheet("QScrollArea{background-image: url(:/Resources/background.png);background-attachment:fixed;}");
                  widget->setAutoFillBackground(false);
                  
                  C 1 Reply Last reply
                  0
                  • B Bonnie

                    @cr00se It will work, have you read my comments? The point is not the combinations but the selector.
                    What you tried is just wrong because you always have background image for the dummy widget, which would of course scroll with it.
                    As I said, you must set the background stylesheet to affect only QScrollArea itself, not any other widgets, including the dummy widget.
                    According to your latest code, just change to

                    //Dummy widget
                    QWidget* widget = new QWidget;
                    
                    // layout 
                    QVBoxLayout* layout = new QVBoxLayout;
                    layout->setSpacing(20);
                    layout->addStretch(10);
                    widget->setLayout(layout);
                    
                    // Set widget to scroll area
                    scroll_area->setWidgetResizable( true );
                    scroll_area->setWidget(widget);
                    scroll_area->setStyleSheet("QScrollArea{background-image: url(:/Resources/background.png);background-attachment:fixed;}");
                    widget->setAutoFillBackground(false);
                    
                    C Offline
                    C Offline
                    cr00se
                    wrote on last edited by
                    #11

                    @Bonnie
                    I removed

                    widget->setStyleSheet("background-image:url(:/Resources/background.png)");
                    

                    Should this code

                    // this code removes background image
                    scroll_area->setStyleSheet("QScrollArea{background-image: url(:/Resources/background.png);background-attachment:fixed;}");
                    
                    widget->setAutoFillBackground(false);
                    

                    look like this

                    // this code has no effect 
                    // the same problem
                    scroll_area->setStyleSheet("background-image: url(:/Resources/background.png);background-repeat:no-repeat;background-attachment:fixed;");
                    
                    widget->setAutoFillBackground(false);
                    
                    B 1 Reply Last reply
                    0
                    • C cr00se

                      @Bonnie
                      I removed

                      widget->setStyleSheet("background-image:url(:/Resources/background.png)");
                      

                      Should this code

                      // this code removes background image
                      scroll_area->setStyleSheet("QScrollArea{background-image: url(:/Resources/background.png);background-attachment:fixed;}");
                      
                      widget->setAutoFillBackground(false);
                      

                      look like this

                      // this code has no effect 
                      // the same problem
                      scroll_area->setStyleSheet("background-image: url(:/Resources/background.png);background-repeat:no-repeat;background-attachment:fixed;");
                      
                      widget->setAutoFillBackground(false);
                      
                      B Offline
                      B Offline
                      Bonnie
                      wrote on last edited by Bonnie
                      #12

                      @cr00se said in QScrollArea repeats background image:

                      Should this code
                      look like this

                      No, it should not, if there's no selector, then all the child widgets of QScrollArea (including the dummy widget) will be affected, so again the dummy widget will also have background image which will scroll with it.

                      If the background image is not shown, that's the problem I said: the background of child widget (probably the dummy widget) is covering the image.
                      When I write test code, at first I coundn't make the background image show.
                      But later I found that's because while calling QScrollArea::setWidget()

                      The widget's autoFillBackground property will be set to true.

                      That's why I said "widget->setAutoFillBackground(false)" must be called after "scroll_area->setWidget(widget)".
                      Then in my test code it works just fine to show the background image of QScrollArea and not scroll.
                      So if yours is not shown, go check what is covering it. You must have something not transparent on it.
                      For example, you should not set any background color for dummy widget.

                      1 Reply Last reply
                      1

                      • Login

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