Please nominate your Qt Champions for 2021!

Background image changes all my widgets appearance.

  • Hi guys,

    First of all sorry for my english, I can speak it but definitely I am not a professional. I am using QT + Python (Pyside2) on Mac OSX. Anyway, I don't think my problem has relation with my operating system or programming language.

    I need to put a background image to some windows of my project, and I've created them. I created a .qrc file, added the images there, the paths are correct, etc. I compiled the .qrc and used the images on the Designer, more specifically in the Stylesheets of the main QWidget.

    I pressed "Add resource --> Background Image --> Select the image", and when I preview the window the background image is here BUT every button, text field, slider, etc, is affected by this background. I mean, the buttons don't keep their design, the slider changes his color a bit, the text fields change their appearance...

    And of course when I run the program, these strange things are there. I will show you some examples:

    When the image is not placed:

    Captura de pantalla 2020-05-21 a las 10.45.08.png

    As you can see, the central button is blue, etc. It has kinda a "modern" design, the widgets I mean. But when I put the image in the background, following the steps QT recommend:

    Captura de pantalla 2020-05-21 a las 10.44.44.png

    You can see the central selector is more squared, the buttons don't keep their color, they have more squared form... etc

    How can I solve this? I am literally going crazy, 2 days trying to solve this, because this affect me in every window.

    Thank you in advance.

  • Add ID selector to your style sheet

    background-image: url(:/images/background.jpg);

  • Lifetime Qt Champion

    Its important to understand stylesheets are cascading -
    meaning it will affect the parent and all its children.

    So as @Bonnie shows, one has to limit what widgets that should be affected and for that the programmer
    can use widgets name ( the # syntax ) and also its type like

    QLabel {....}
    or both 
    QLabel#mylabel {....} 

  • @Bonnie @mrjj So, talking about backgrounds, I just should put it for example like that, right?:

    background-image: url(:/resources/Imagenes/fondoPrincipal.png);

  • @Retourned

    1. You don't need to write "QWidget" because any widget is a QWidget.
      Type selector in style sheet is more useful for subclass of QWidget.
      But if you want to match a QWidget exactly, not any subclass, you can use ".QWidget".
    2. You need to make sure that there won't be any child widget having the same object name.

Log in to reply