How can I put a background image in the first tab of a QTabWidget?

[Igor86]

Hi all!

I would need to put a background image, stretched as background of the first tab of my QTabWidget. Ideally in the designer, but I think it cannot be done in the designer, so via code would be ok too..

i tried these things based on what I found online, but none worked:

self.tabWidget.setStyleSheet("background-image: url(:/test.png);")
self.tabWidget.setStyleSheet("border-image: url(:/test.png);")

any help is greatly appreciated..

Thank you!

[JonB]

@Igor86
What type is self.tabWidget? A QTabWidget? If you want it on the first widget in the tab widget then that is what you need to put it on (or even on the first tab if that is what you mean?). Also, have you set up your Python program so that it includes the resources you need for your image file?

[Igor86]

@JonB
Thanks for your answer!
self.tabwidget is a QTabWidget...

My goal is to have the image as background of the whole first Tab.

I have not set up the python program so that it includes the resources needed.. actually I didnt even know I need to do that. I was thinking that it can be accessed by adding the path to the image...

Thank you

[JonB]

@Igor86
So try putting your style sheet onto the QWidget you place as the first tab, not on the QTabWidget itself.

Your path is a "resource path" because it begins with :/. Setting up resources for a Python Qt is not so easy as you do not build an executable. It can be done if you want, but you would have to read how. If you are happy to do this by an external file instead, specify the full path to that file (/..., but not :/...).

[Igor86]

Thank you very much! will try and report back!

[Igor86]

@JonB

unfortunately it is not working. I tried it via code and via designer:

if I set a background-color: #112233; it works. but background-image: url("/test.png"); does not work.
the image file is saved in the same folder as the script itself.

[JonB]

@Igor86
And the full path to your file which I stressed you will need is the /test.png that you have written there? I very much doubt it....!

Get the path working first for a QImage or a QLabel or QPushButton with image or similar, so that you know it works. Then try it with the QWidget.

[Igor86]

thank you, I got it working now..

but somehting is not entirely right:

i applied it to the "tab" widget, but also 2 QLabels contained in the Qwidget got the same background..

i'd expect the two squares to be either empty, or transparent..

(i did it via code, not in the designer, like this:

self.tabWidget.findChild(QWidget, "tab").setStyleSheet("background-image: url(\"" + os.path.dirname(__file__) + "/test.png\");")

[JonB]

@Igor86
I guess unqualified background-image: url(...) applies the background image to all descendants of the QWidget.

Try QWidget { background-image: url(...); } on it. Does that restrict it to your QWidget, or does it still inherit to QLabels because they are derived from QWidget?

If the latter try #FirstPage { background-image: url(...); } and set your QWidget's object name to FirstPage, which you can do at the top of the widget's properties you show in Designer.

[Igor86]

@JonB

I updated my previosu post at the same time as you answered here..

[JonB]

@Igor86
In what way does that affect what I said to try?

[Igor86]

In no way, it was just an information..

I tryied what you said, and QWidget {... did not work, but the #FirstPage worked perfectly.. thank you very much for all your help!

[JonB]

@Igor86
Good. If you had set its object tab to tab per your code you could obviously have used that for its name/selector, but I think FirstTab is clearer.

You might find that if you don't want to give it an object name .QWidget { background-image: url(...); } might have worked. That has a . (dot) before the widget class name. Per https://doc.qt.io/qt-5/stylesheet-syntax.html#selector-types (which you might want to read for these stylesheet things)

Class Selector .QPushButton Matches instances of QPushButton, but not of its subclasses.

This is equivalent to *[class~="QPushButton"].

But then if you did add any further QWidgets onto that page they would be affected.