QWidget's background applied to all its QWidget children

Question

I chose to use Qt to manage the GUI of a project I am working on.

After finding how to apply a picture at the bottom of my QWidget , I noticed that it has an impact on all the components that are added to it.

Whatever the style applied through the setStyleSheet method or even with a QPixmap , the background of these elements is always the image defined for the QWidget container.

How can I avoid this behavior ?

Here is my code :

MainMenu::MainMenu(QWidget* Parent, const QPoint& Position, const QSize& Size) : QWidget(Parent) {

    QString qwidgetStyle = "QWidget {background-image: url(background.jpg); border: 5px solid rgba(3, 5, 28, 1);}";
    QString buttonStyle = "color: rgba(73, 123, 176, 1); font-size:30px; background-color: rgba(73, 123, 176, 1);";

    move(Position);
    resize(Size);   
    setStyleSheet(qwidgetStyle);

    // Menu title
    QLabel *title = new QLabel(this);
    title->setText("Menu");
    title->setStyleSheet(buttonStyle);
    title->setAlignment(Qt::AlignCenter);

    // Menu buttons
    // Play
    buttonPlay = new QPushButton("Play");
    (*buttonPlay).setEnabled(true);
    (*buttonPlay).setStyleSheet(buttonStyle);
    connect(buttonPlay, SIGNAL(clicked()), this, SLOT(handleButton()));
    // Option
    buttonOptions = new QPushButton("Options", this);
    (*buttonOptions).setEnabled(true);
    (*buttonOptions).setGeometry(250, 175, 100, 50);
    (*buttonOptions).setStyleSheet(buttonStyle);
    connect(buttonOptions, SIGNAL(clicked()), this, SLOT(handleButton()));
    // Quit
    buttonQuit = new QPushButton("Quit", this);
    (*buttonQuit).setEnabled(true);
    (*buttonQuit).setGeometry(250, 275, 100, 50);
    (*buttonQuit).setStyleSheet(buttonStyle);
    connect(buttonQuit, SIGNAL(clicked()), this, SLOT(handleButton()));

    // Layout
    QGridLayout *layout = new QGridLayout;
    layout->setMargin(50);
    layout->addWidget(title, 0, 0, 1, 5);
    layout->addWidget(buttonPlay, 3, 1, 2, 3);
    layout->addWidget(buttonOptions, 4, 1, 2, 3);
    layout->addWidget(buttonQuit, 5, 1, 2, 3);
    setLayout(layout);

    show();
}

Answer 1

The behavior you encountered is perfectly normal, because of the following lines :

QString qwidgetStyle = "QWidget {background-image: url(background.jpg); border: 5px solid rgba(3, 5, 28, 1);}";
...
setStyleSheet(qwidgetStyle);

Here, you just told Qt to apply qwidgetstyle to every QWidget of your application , with the keyword QWidget . That's why in Qt, you better set a name to your object if you want to apply a style to this particular object.

In your code, QLabel and QPushButton both inherit from QWidget , so they will have the style you defined for a QWidget , unless you name them or you specify the style for each one .

If you want to set style sheet for your MainMenu which inherits directly from QWidget (which is what you are doing in the first place), you have to set a name, and then apply the style :

setObjectName("MainMenu");
QString qwidgetStyle = "QWidget#MainMenu {background-image: url(background.jpg); border: 5px solid rgba(3, 5, 28, 1);}";
setStyleSheet(qwidgetStyle);  // here, only your MainMenu will have the style "qwidgetstyle"

Notice that you can, for example, set the same style sheet for every QWidget , and only add a particular color for your MainMenu :

// this is in a CSS, but you can apply it directly from the MainMenu constructor of course
QWidget, QWidget#MainMenu {
    background-image: url(background.jpg); 
    border: 5px solid rgba(3, 5, 28, 1);
} // aplied to all QWidget

QWidget#MainMenu { 
    color : #9b9b9b; // a nice grey, only applied to MainMenu
}

Again, be specific when using style sheets or you will end up having strange colors/alignments everywhere in your application :). Hope that helps!

NB : you can also thank @PaulRooney who gave a very good link in the comments.