Background-image of MainWindow widget is overriding background image of child components

  • Hi,

    I set the stylesheet "background-image" of my MainWindow widget to a *.png to set the background of my main widget. But now all the components (e.g. QLabel and QPressButton) that I add to the main MainWindow show as background the same *.png, even after I set the components style to display a color wiht setStyleSheet("background-color: ...") .Does anyone know why this is happening? Why would the child components inherit the background image of the parent widget?

    and if that is the case, how can i then change the background of the child components to be set to a color?



  • where do you put the code?
    Do you use creater or you write the code manualy?

  • Code:

    Here the MainWindow background-image is set to image.png

    MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent), ui(new Ui::MainWindow)
    setStyleSheet("background-image: url(:/images/image.png)");
    // Create stack

    stackedWidget = new QStackedWidget(this);
    //Create first active widget
    TNotesWidget *firstWidget = new TNotesWidget (stackedWidget);
    // Add to stacked widget
    stackedWidget-> addWidget(firstWidget);
    // Add stack as a central widget to QMainWindow



    In the TNotesWidget , which is the current widget in the stackedWidget, I add the QPushButtons.
    These QPushButtons display the same background-image set in the MainWindow::MainWindow constructor.
    The "navigator" widget is a custom component. I creat a horizontal layout called "hlayout1" and I add a QLabel, and QPushButton to it. The QLabel and QPushButton display the same background image that was set in the MainWindow constructor.I don't know why.


    TNotesWidget::TNotesWidget(QStackedWidget *stackedWidget, QWidget *parent): BaseWidget(stackedWidget,parent)

    // Vertical layout

    // setStyleSheet("background-image: url(:/images/image.png)");

    QVBoxLayout *extLayout = new QVBoxLayout;
    QHBoxLayout *hlayout1 = new QHBoxLayout;
    //QVBoxLayout *vlayout2 = new QVBoxLayout;
    MyNavigatorWidget *navigator = new MyNavigatorWidget();
    //Create navigator items
    QLabel *title = new QLabel("Tasting Notes");
    title->setStyleSheet("background-color: rgb(124,125,127); font-family: Courier; font-weight: bold; font-style: normal");
    QPushButton *editButton = new QPushButton("Edit");
    editButton->setStyleSheet("background-color: lightgray; border-width: 0px; margin: 4; border-radius: 5px; border-style: outset");
    //Create List and Items
    QListWidget *myListWidget = new QListWidget();
    myListWidget->setStyleSheet("border-style: none; border-width: 0px");
    // Add handlers for the myListWidget
    QObject::connect(myListWidget, SIGNAL(itemClicked(QListWidgetItem *)), this, SLOT (MainViewHandler(QListWidgetItem *)));
    myListWidget->setItemDelegate(new ListDelegate(myListWidget));
    // WINE
    QListWidgetItem *item = new QListWidgetItem();
    // Code below adds image to each item
    // better to do this in Delegate because
    // all items have the same icon
    //QPixmap pixmap(":/images/arrow.png");
    //QIcon ic(pixmap);
    //QVariant v(QMetaType::QIcon, &ic);
    //item->setData(Qt::UserRole + 3, v);
    item->setData(Qt::DisplayRole, "Wines");
    //item->setData(Qt::UserRole + 1, "Description");
    // BEER
    QListWidgetItem *item2 = new QListWidgetItem();
    item2->setData(Qt::DisplayRole, "Beer");
    // Add the Navigator and ListWidget to the vertical extLayout
    // Set the external layout as the main layout for this TNotesWidget view



  • look at "this":

    try this
    qApp->setStyleSheet("QPushButton { background-color: yellow }");
    this sets all your buttons in your app to yellow put it in your main constructor

  • Hey thanks vinb, that fixed it!


  • if you only want the background image on the main windows, you have to specify a selector of the style sheet.

    MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent), ui(new Ui::MainWindow)
    setStyleSheet("MainWindow {background-image: url(:/images/image.png);}");

    Then it should only be used on objects of the class MainWindow.
    Otherwise iT's used for all widgets (including childs) of this widget :-)

  • Thanks for the post! Perfect answer to my question - except for some white pixels.

    Does anybody know what makes the thin white frame around the MainWindow?
    When I use the above solution with my MainWindow,

    @ setStyleSheet("MainWindow {border-image: url(:/images/background); };"); @

    instead of

    @ setStyleSheet("border-image: url(:/images/background); "); @

    I get a small white frame around the background. This happens only for MainWindow, for all pop-up windows etc. it works just fine.

    Clarification - I use

    @ QMainWindow::centralWidget()->layout()->setContentsMargins(0,0,0,0); @

    to remove the border. If I don't do this, there is a white rectangle 5 pixels from the border of the image that I would like to remove still. What is this?

    How can I fix this ? - It looks ugly ;)

  • Found the solution myself. I have everything contained in a frame that causes the white border

    ui->frame->setStyleSheet("QFrame {border-image: url(:/images/background); }");

    Fixes it.

Log in to reply

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.