Setting background image for QPushButton

Question

I am struggling to set an background image for an QPushButton. No Success till now. Following is my code.

appsWidget::appsWidget(QWidget *parent)
    :QWidget(parent)
{
    QPushButton *button1 = new QPushButton("SETTINGS",this);
    QPushButton *button2 = new QPushButton("TEST",this);
    QPushButton *button3 = new QPushButton("IE",this);

    button1->setStyleSheet("background-image:url(config.png)"); -> No success


    qDebug("appWidget initialized.");

    QHBoxLayout *layout = new QHBoxLayout;
    layout->addWidget(button1);
    layout->addWidget(button2);
    layout->addWidget(button3);
    this->setLayout(layout);
    connect(button1,SIGNAL(clicked()),this,SLOT(setClickIndex1()));
    connect(button2,SIGNAL(clicked()),this,SLOT(setClickIndex2()));
    connect(button3,SIGNAL(clicked()),this,SLOT(setClickIndex3()));
}

The image I am using in the stylesheet is located in the same project folder. Do anybody has any solution?

Answer 1

Your css selector is not correct.

You should do something like:

button1->setStyleSheet("QPushButton{ background-image: url(config.png); }");

Answer 2

You have to set the flat attribute to true:

button1->setFlat(true);

You also have to set the autofillbackground -

button1->setAutoFillBackground(true);

You may want to look at QToolButton which doesn't require it to be flat in order to render an image. I'm using them in an app I'm writing at the moment and they look very nice:

m_showAddCommentButton = new QToolButton();
m_showAddCommentButton->setAutoFillBackground(true);
palette = m_showAddCommentButton->palette();
palette.setColor(QPalette::Button,QColor(82,110,166));
m_showAddCommentButton->setPalette(palette);
m_showAddCommentButton->setIcon(QIcon(":/uiImages/addComment_50_50.jpg"));
m_showAddCommentButton->setIconSize(QSize(40,40));
m_showAddCommentButton->setToolTip("Comment");
connect(m_showAddCommentButton, SIGNAL(clicked()),
        manager, SLOT(showAddComment()));
hLayout->addWidget(m_showAddCommentButton,0);

(My image is stored as a resource)

Answer 3

You can use brush as palette element to fill background for any widget, for QPushButton that works when button is flat.

QPixmap pixmap("image.jpg");
QPalette palette;    
QPushButton *button= new QPushButton(this);
palette.setBrush(button->backgroundRole(), QBrush(pixmap));

button->setFlat(true);
button->setAutoFillBackground(true);    
button->setPalette(palette);