QScrollArea repeats background image

cr00se

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

// Dynamically adding new objects to layout via addLayout()
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);

Problem

QScrollArea repeats image

I tried to use no-repeat but it is not what I need

setStyleSheet(...; "background-repeat: no-repeat;");

Also this one

setStyleSheet(...;  background-attachment: fixed);

doesn't work too

I need static background image behind QScrollArea

Thanks!

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 ?

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

SGaist

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

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

JoeCFD

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

cr00se

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

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);

cr00se

@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;
}

cr00se

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

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);

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);

Bonnie

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