Background image or transparency from Style Sheet does not show on QWidget



  • Hello,

    I've read the documentation on Qt Style Sheets but as I try to apply it on my application, I find some difficulties:

    Given that MainWindow() is a the main widget, inheriting from QWidget():

    1. setting the alpha transparency to background as follow works to the extent the main widget's colour is transparent at 50%. But the canvas of the window is black, and therefore the MainWindow()'s background appears grey. I would like to have the window canvas to be transparent too so as to see through the application.
      @MainWindow {background-color: rgba(100%, 100%, 100%, 50%)}@

    2. setting a background image as follow does not work on any widget of the application:
      @QToolBar {background-image: url(/wood.jpg)}@

    Is there anything else I need to do in order for these two properties to be effective? Thank you for your help.

    Regards,
    Benjamin



  • Regarding QToolBar , you may set the style sheet like this
    @background-image: url(:/wood.jpg);@

    I guess, the missed " : " caused the problem .

    Regarding transparency , i think you have to try with gradient. I am not sure, nor tried :(



  • Hi Rahul, thanks for your answer.
    The ":" means the file is registered in resources RCC file. In this case it isn't registered so the relative path to the file is given instead, and that must be done without ":".



  • If you are using relative path, make sure you have the image , relative to the deploy/ build directory.

    In this case, copying the wood.jpg to your build dir solves the problem.

    Edit : You can set the opacity of the window, to make it transparent :)


  • Moderators

    What OS are you on? If windows is your target, then "this qt labs article ":http://labs.qt.nokia.com/2009/09/15/using-blur-behind-on-windows/ could interest you.



  • PS: I have partly found an answer regarding the background image.
    Changing adding a preceding dot to the path seems to help locating the file:
    @QToolBar {background-image: url(./wood.jpg)}@

    However, the same applied to the MainWindow does not work:
    @MainWindow {background-image: url(./wood.jpg)}@



  • @Eddy: Target is Linux in general, I am working on Ubuntu + Gnome at the moment.

    [quote author="Eddy" date="1314551129"]What OS are you on? If windows is your target, then "this qt labs article ":http://labs.qt.nokia.com/2009/09/15/using-blur-behind-on-windows/ could interest you.[/quote]



  • Rahul: I am working with Python, and I believe the "build" directory is something of C (?). Anyway, as stated later, using "./wood.jpg" as a path pointed to the file in the same directory.

    As to set the window transparent, I have tried:
    @self.setAttribute(QtCore.Qt.WA_TranslucentBackground, True)@
    But that make the entire main widget transparent, and it is not the desired result: I wan the partial opacity of the main widget to remain, and the black background it is painted on to be fully transparent.

    [quote author="Rahul Das" date="1314551126"]If you are using relative path, make sure you have the image , relative to the deploy/ build directory.

    In this case, copying the wood.jpg to your build dir solves the problem.

    Edit : You can set the opacity of the window, to make it transparent :)[/quote]



  • Copying the image to the build directory and setting the style sheet as @background-image: url(./Jellyfish.jpg);@ worked for me.

    And "opacity":http://doc.qt.nokia.com/latest/qwidget.html#windowOpacity-prop as well!

    and sorry , am not familiar with Python :(



  • As stated above "./wood.jpg" worked indeed (with the file placed in the same directory as the source file). But why that does not work for the MainWindow() i don't know :(

    As to setting opacity, it worked indeed, but on all widgets, whereas I want the main widget only to be translucent and not its children.

    [quote author="Rahul Das" date="1314551605"]Copying the image to the build directory and setting the style sheet as @background-image: url(./Jellyfish.jpg);@ worked for me.

    And "opacity":http://doc.qt.nokia.com/latest/qwidget.html#windowOpacity-prop as well!

    and sorry , am not familiar with Python :([/quote]



  • I assume you are trying to change the background of the centralWidget. :) Are you ?

    Your mainwindow has a centralWidget right ? set the style sheet of this central widget. What do you see ?



  • Rahul, thanks again.

    Perhaps it is easier if I show what I would like to achieve, see this mockup:

    !https://lh3.googleusercontent.com/-P-DDWz3XDyE/Tlo05_ABj6I/AAAAAAAACgM/vXD464ndnIU/s720/dash2.png(Mockup)!

    To achieve this, I have to change the background of the main widget to show the wood texture. That didn't work so far. I am not working with a QMainWindow() however, so there is no central widget I believe. The main window of my application inherits from a QWidget().

    The alternative is to make the main widget completely transparent, which I achieved with setting property: @self.setAttribute(QtCore.Qt.WA_TranslucentBackground, True)@

    I would also try to make the background semi-transparent, using an alpha value of eg. 50% in the style sheet: which does not work so far.



  • Update:

    Using a tip from "another post":http://www.qtforum.org/article/23474/background-image-for-qwidget.html#post86564, I've added the following to my code:
    @self.palette = QtGui.QPalette()
    self.palette.setBrush(self.backgroundRole(), QtGui.QBrush(QtGui.QImage("./wood.jpg")))
    self.setPalette(self.palette)@

    It worked, so it means it is possible. Now I need to do the same using a style sheet, please let me know if you have an idea how to make this happen.

    Thanks.



  • Update:

    On "StackOverflow":http://stackoverflow.com/questions/4830517/qt-stylesheet-background-color-yes-background-image-no it is porposed to derive the MainWidget from QFrame() instead of QWidget() and setting the background image does work then.

    This problem is "recurrent":http://developer.qt.nokia.com/forums/viewthread/4713. But there's no clear solution to be seen anywhere except for the above.
    Any thoughts?

    Cheers.



  • I tried with pallet, and for me also it failed. May be we should look for some other work around to appear the same,like its mentioned in stack overflow.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.