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?

Brian Roach · Accepted Answer · 2010-04-20T05:01:39.270

8

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)

edited Apr 20 '10 at 05:01

answered Apr 20 '10 at 01:29

Brian Roach

76,169
12
136
161

In the above code should i resize my Image to fit to the button or it will be taken care of automatically? – Surjya Narayana Padhi Apr 20 '10 at 06:26
1

You can go either way. Originally I resized my image to 50x50 externally in an editor, but then decided I wanted 40x40 - `setIconSize()` scales the icon to whatever you want. – Brian Roach Apr 20 '10 at 14:21
This is not correct, you do not have to set the flat attribute or the auto fill background. You can simply load the image through `setIcon(":/path/to/image.png")`. I will usually first load the image in a `QPixmap` so it can be leveraged as a paint device and then pass in the Pixmap to whatever element needs it. – Chef Pharaoh Apr 28 '14 at 18:48

score 3 · Answer 2 · edited Mar 06 '12 at 18:17

3

Your css selector is not correct.

You should do something like:

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

edited Mar 06 '12 at 18:17

Matt Fenwick

48,199
22
128
192

answered Mar 06 '12 at 17:29

justananswer

41
1

score 1 · Answer 3 · answered Apr 22 '12 at 21:05

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

Setting background image for QPushButton

3 Answers3

Linked

Related