Qt Stylesheet. Background-color, YES. background-image, NO

Question

It's a weird problem with stylesheets: I have a window, child of class QWidget. I apply a stylesheet to it to ideally change the background of the entire window to an image with a repeat-x and repeat-y, tiling it.

The stylesheet "pipeline" works. If I use "background-color" and set it to say, red, the entire window will be painted red. however, if I use the background-image, it does not. if i add a CHILD WIDGET (using Qt-Designer) inside the window, the background-image will work, just inside that child widget, but not outside of it, all over the parent window.

Obviously I am doing something wrong, but am really clueless as to why the background-color would work on the entire window, but the background-image won't, unless there's a child widget, and then, only inside of it.

Please post the stylesheet. Qt stylesheet rules are not quite the same as CSS rules. It may just be a different behavior than you are expecting, for example, setting the scope of the style. — Dave Mateer
– Dave Mateer, Commented Jan 28, 2011 at 18:47
This stylesheet presents the jpeg ONLY if there's a QWidget element already on the QWidget descendant window, but only in the area of that element, not on the entire window. QWidget { background-image: url(:/images/metal-texture.jpg); background-position: top left; background-repeat: repeat-x repeat-y; /*background-color: red;*/ } — JasonGenX
– JasonGenX, Commented Jan 28, 2011 at 18:57
Sorry, I still can't tell what is going on. I would need to know on what element that stylesheet is being applied. And I'm still not clear about your widget heirarchy. Would you be able to post some code, or maybe draw an ASCII diagram or something? Sorry for being dense... :) — Dave Mateer
– Dave Mateer, Commented Jan 28, 2011 at 19:11
BTW, just edit your question so you can get all the nice formatting options, instead of trying to put it in a comment. — Dave Mateer
– Dave Mateer, Commented Jan 28, 2011 at 19:12
My widget heirarchy is simply, there is a QWidget derived class. nothing else. All I wanted to do it have the window with a background image. The window itself is empty. The only way i can make this background image work is if i ADD an empty Qwidget (using QT-Designer) onto my UI. then the background image paints for that QWidget only, but not to the whole window. — JasonGenX
– JasonGenX, Commented Jan 28, 2011 at 19:28

feedc0de · Accepted Answer · 2018-05-02 12:42:13Z

I had a similar problem and it was solved by reading Qt Stylesheets docs.

As it is said in the Qt's stylesheets reference, applying CSS styles to custom widgets inherited from QWidget requires reimplementing paintEvent() in that way:

void CustomWidget::paintEvent(QPaintEvent *) { QStyleOption opt; opt.init(this); QPainter p(this); style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this); }

Without doing it your custom widgets will support only the background, background-clip and background-origin properties.

You can read about it here: Qt Stylesheets reference in the section "List of Stylable Widgets" -> QWidget.

Hope, it will help!

ScottG · Accepted Answer · 2011-06-11 15:53:19Z

I know this is kind of an old question, but I stumbled across it because I was having the exact same problem.

It turns out if you create your widget as a subclass of QFrame instead of a QWidget, the background-image property seems to take fine. Also , as Dave's example shows, if you just create a "raw" QWidget, it also seems to work fine. For whatever reason, if you create a new widget derived from QWidget, background-image no longer works.

If you create your widgets in Qt Designer or Creator, they don't have an option to create a QFrame-derived widget, so I just tell it I want a QWidget-derived class, then manually change the .cpp and .h file to derive from QFrame instead of QWidget.

Ha thanks for this! Inheriting from QFrame did the trick for me. You saved my day.

Dave Mateer · Accepted Answer · 2011-01-28 19:32:14Z

-1

The code below is working fine on my machine. Maybe you can see where it differs from what you have? Hope it is helpful.

#include <QtGui> int main(int argc, char **argv) { QApplication app(argc, argv); QWidget main_window; main_window.setStyleSheet("background-image: url(Chrysanthemum.jpg); " "background-position: top left; " "background-repeat: repeat-xy;"); main_window.show(); return app.exec(); }

answered Jan 28, 2011 at 19:32

Dave Mateer

18k15 gold badges102 silver badges153 bronze badges

3 Comments

JasonGenX Over a year ago

I guess the only difference is that I use QT-Designer and *.ui files and your solution is 100% programmatic. In any case, i think i'll just work around it by having an internal widget that covers the whole area of the main QWidget and has its own background. I appreciate your help.

Dave Mateer Over a year ago

Also, it appears that you are applying a scope of QWidget to your style sheet, and using repeat-x repeat-y instead of repeat-xy. Maybe one of those is causing the strange behavior?

Anti Earth Over a year ago

I chose the same Windows example picture for my stylesheet experimentation! ;)

Collectives™ on Stack Overflow

Qt Stylesheet. Background-color, YES. background-image, NO

3 Answers 3

Comments

1 Comment

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Linked

Related