6

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.

Jacob Krieg
  • 2,834
  • 15
  • 68
  • 140
JasonGenX
  • 4,952
  • 27
  • 106
  • 198
  • 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 Jan 28 '11 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 Jan 28 '11 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 Jan 28 '11 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 Jan 28 '11 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 Jan 28 '11 at 19:28
  • Hmm ... well, not sure. I posted some code below that is working on my machine. Just a plain, empty QWidget with a background image. It is working fine. (Windows 7 32-bit). Maybe you can spot what is different between it and the version you have? – Dave Mateer Jan 28 '11 at 19:33

3 Answers3

14

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!

feedc0de
  • 3,646
  • 8
  • 30
  • 55
Roman Kruglov
  • 3,375
  • 2
  • 40
  • 46
4

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.

ScottG
  • 773
  • 6
  • 18
-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();
}
Dave Mateer
  • 17,608
  • 15
  • 96
  • 149
  • 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. – JasonGenX Jan 28 '11 at 19:42
  • 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? – Dave Mateer Jan 28 '11 at 19:48
  • I chose the same Windows example picture for my stylesheet experimentation! ;) – Anti Earth Jan 26 '12 at 01:26