[Custom Background for a widget]

[user 22_23]

Hello,
I've been trying to set a custom background ( an image )for a widget but nothing seemed to work fine.

In my main.cpp file, I used stylesheet where I specified the path of the image I want to insert but it wasn't dispalyed.

MainWidget widget;
  
    MainWindow mainWindow;
    widget.setStyleSheet("background-image: url(C:/Users/geena/Desktop/Project/pic.png)");
    mainWindow.show();

What shall I do and thank you.

[SGaist]

Hi and welcome to devnet,

From the snippet you posted, you are setting the style sheet on widget but showing mainWindow. So you might not be looking at the widget you think you do.

[user 22_23]

@SGaist hello, thank you, yeah, I know but the widget is one of the elements of my mainwindow.
There are other elements on my mainwindow like push buttons.
In fact when I try to change the background of the widget and show it [showing the only the widget and not the whole mainwindow] as shown in the code lines below:

MainWidget widget;
    widget.setStyleSheet("background-image: url(C:/Users/geena/Desktop/Project/pic.png)");
    widget.show();

The image is also not displayed, the background of the widget doesn't change.

Even If I try to set it manually, it doesn't work; when I run my app, the background is black.

[Petross404_Petros S]

@user-22_23 Random idea: Is it black because the filetype should be something else? Again, just a random thought. What is the documentation saying?

[SGaist]

Just to clear things, can you write a minimal main.cpp that just creates a QWidget, set the style sheet and show it ?

[anil_arise]

@user-22_23
1st add resource file (.qrc) in your project details
try with following :

MainWidget widget; // MainWidget is QMainWindow
widget.setStyleSheet("QMainWindow {image: url(:/pic.png; color: rgb(0, 0, 0); background-color: rgb(150, 200, 202);}"); // image path is as per define in .qrc file
widget.show();

[user 22_23]

@Petross404_Petros-S well, I did not get what you meant, the background should be covered by the an image I loaded. I tried to do it with stylesheet but that didn't work, it is still black.

@SGaist yes I actually did that, nothing seemed to work, as I mentioned before even if I try to set the background manually in the mainwindow user interface.

@anil_arise I tried that thank you but, the background is still black and also I only get to show the widget and not the whole mainwindow that contains spin boxes and push buttons.

[anil_arise]

@user-22_23
then use it like
widget.setStyleSheet(QStringLiteral("border-image: url(:images/pic.png);"));

Here widget is any kind of widget.

[user 22_23]

@anil_arise Okay that worked but only on the mainwindow. Its background has changed.

Also, when I only show the widget after applying the stylesheet, its background doesn't change; still black.
But I have a mainwindow in which there are: the widget, a push button and spin boxes.
The widget was created so that I can render stuff in it.
I mean my goal is to show the mainwindow that has a widget whose background is covered with an image.

[user 22_23]

There is something really really weird.
Changing the background color of the mainwindow works fine whether I use setStyleSheet or change the color directly on the mainwindow.ui in the properties as shown in the image below:

However when I change it in the properties of the widget, that doesn't work.

[anil_arise]

@user-22_23

If QWidget set stylesheet for background image it will inharit to all its child widget.
so morph QWidget to QFrame and set like

ui->frame_One->setStyleSheet(QStringLiteral("QFrame {border-image: url(:images/ubuntu_690x345.png);}"));

example output :

[bgarisnWB]

I am also having the same behavior:

If this is my custom widget that is derived from QWidget:

CCustomWidget.h

namespace Ui {
class CCustomWidget;
}
class CCustomWidget : public QWidget
{
	Q_OBJECT
public:
	explicit CCustomWidget(QWidget* pParent = nullptr);
	~CCustomWidget();
private:
	Ui::CCustomWidget* ui;
};

CCustomWidget.cpp

#include "CCustomWidget.h"
#include "ui_CCustomWidget.h"

CCustomWidget::CCustomWidget(QWidget* pParent) : QWidget(pParent), ui(new Ui::CCustomWidget)
{
	ui->setupUi(this);
}

CCustomWidget::~CCustomWidget()
{
	delete ui;
}

main.cpp

#include <QApplication>
#include "CCustomWidget.h"

int main(int argc, char* argv[]) 
{
	QApplication App(argc,argv);

	// this does not load the image
	CCustomWidget CW;
	CW.setStyleSheet(QStringLiteral("background-image: url(:/background.png);"));
	CW.show();
	
	// this does load the image
	// QWidget W;
	// W.setStyleSheet(QStringLiteral("background-image: url(:/background.png);"));
	// W.show();	
	
	return App.exec();
}

When I am in the Designer tab of QtCreator, the background image for my custom widget displays correctly. But as soon as I compile/run the program. The custom widget no longer has a background image.

I have tried:

• Programmatically setting the style sheet (as above)
• Setting the style sheet in the Designer of QtCreator
• Specifying my custom widget in the style sheet definition, where myCustomWidget is the QObject name that I set for my class in the constructor.

CW.setStyleSheet("#myCustomWidget{ background-image: url(:/background.png); }");

I finally resorted to adding a QWidget on the Designer tab of QtCreator. Setting its style sheet to the background image by setting it in the properties section, and then moving the widget to the back so that it is behind everything else on the custom widget.

There is clearly something fundamental that I am missing but I do know know what it is or what even to ask. If someone could point me in the right direction, I would greatly appreciate it. It seems like setting a custom background image for your custom widget should be something that is very easy to do, but it is eluding me.

Thanks