CODEWITHSUNDEEP
c++qt
Sahil Gupta
Sahil Gupta

Reputation: 295

How do I add a background image to the QMainWindow?

I am new to QT creator. I have tried a bunch of things to set my background image for the QMainWindow. I added a resource folder with my image. I tried to add it by using setStyleSheet in the UI. When I use the UI I can see the image, but when I run it nothing shows. I want to use an image of a poker table as the background and be able to put buttons and other things on top.

main.cpp:

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

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();

    return a.exec();
}

mainwindow.cpp:

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    this->setStyleSheet("{background-image: url(:/images/images/PokerTableBackground.jpg);}");
}

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

Like I said, I tried doing this and also putting the image through the UI but neither method worked. I want the image set as the background for the whole thing.

I also tried using this:

QWidget *pic = new QWidget(ui->tab);
    pic->setStyleSheet("background-image: url(:/images/images/PokerTableBackground.jpg)");
    pic->setGeometry(QRect(10,10,220,48)); // your location and size.

Upvotes: 13

Views: 77021

Answers (3)

max
max

Reputation: 2657

You can add a background image to your MainWindow by doing the following:

  1. Create a QPixmap and give it the path to your image.
  2. Create a QPalette and set its QBrush with your QPixmap and its ColorRole to QPalette::Window.
  3. Set your MainWindow palette to the palette you just created.

As an example, you can add these lines to the constructor of your MainWindow class:

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    QPixmap bkgnd("/home/user/Pictures/background.png");
    bkgnd = bkgnd.scaled(this->size(), Qt::IgnoreAspectRatio);
    QPalette palette;
    palette.setBrush(QPalette::Window, bkgnd);
    this->setPalette(palette);
}

The advantage with this one is that you have the ability of modifying/changing your background image programmatically without having to use or learn any CSS stylesheet syntaxes.

Upvotes: 29

DomTomCat
DomTomCat

Reputation: 8569

The CSS style background will be inherited in the child widgets and thus create weird looking windows. A possible solution is to limit the background to MainWindow or #centralWidget. If, additionally, you want to stretch the image to cover the full widget, use this kind of CSS

this->setStyleSheet(
            "#centralWidget { "
            " border-image: url(:/background.png) 0 0 0 0 stretch stretch;"
            "}");

Upvotes: 8

Hadi Rasekh
Hadi Rasekh

Reputation: 2740

You can set background style sheet of central window, 

this->centralWidget()->setStyleSheet("background-image:url(\"bkg.jpg\"); background-position: center; ");

In the constructor it would be something like this:

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    this->centralWidget()->setStyleSheet(
         "background-image:url(\"bkg.jpg\"); background-position: center;" );
}

Upvotes: 14

Related Questions