Important: Please read the Qt Code of Conduct -

[SOLVED] Transparent background behind button layout on PNG

  • Hello together,

    in the picture you can see a somewhat strange background color behind the buttons.

    My questions is how can I remove that part or make it transparent. It seems it takes a similiar color to the image. There is no problem with "one color" images.

    Current stylesheet:

    QPushButton {
    color: #333;
    border: 2px solid #555;
    border-radius: 11px;
    padding: 5px;
    background: qradialgradient(cx: 0.3, cy: -0.4,
    fx: 0.3, fy: -0.4,
    radius: 1.35, stop: 0 #fff, stop: 1 #888);
    min-width: 80px;
    QPushButton:hover {
    background: qradialgradient(cx: 0.3, cy: -0.4,
    fx: 0.3, fy: -0.4,
    radius: 1.35, stop: 0 #fff, stop: 1 #bbb);
    QPushButton:pressed {
    background: qradialgradient(cx: 0.4, cy: -0.1,
    fx: 0.4, fy: -0.1,
    radius: 1.35, stop: 0 #fff, stop: 1 #ddd);

    I'd like to add that I'm farely new to QT and not a too experienced programer currently learning Python and with no experience in C++ whatsoever.

    Thank you for your answers in advance.

  • Lifetime Qt Champion

    Hi and welcome
    What are the buttons inside of?
    It seems they are in a widget or a frame ?

  • @mrjj they are in a QVBoxLayout.
    My plan is to make the whole project scalable so I dont have to redo the gui for every resolution or atleast only for 16:9 and 4:3.
    Any tips are much appreciated.

  • Lifetime Qt Champion

    Ah, that way.
    Normally they are pretty transparent.
    How do you set the background ?
    Is that a QLabel or what you use ?
    Im asking to see if I can get same result as you :)

    Well using Layouts are a good way to make sure it can scale. Often one has to
    use a layout in a layout to get the exact effect but once learned, they are super handy.

  • @mrjj the image is set as background-image on the QWidget:

    background-image: url(:/720p/Data/Pictures/Background/1280x720/#4.png);

    dont know yet if i create several images for different resolutions or if i resize a high-res image with python. Not sure how I can implement it but i'll figure it out.

    Ok I fixed it, i applied a grid layout to the form and now it somehow works.

  • Lifetime Qt Champion

    Hi , I could get it to do so also.
    It seems when the layout/frame/widget is owned by
    the background widget, it can use a color from the bg image as its background.
    if I move it outside, it will use the background color I specify.
    I have only used a QLabel as bg so I learned something new :)

    I guess what is happening is that its also a widget so it inherits the bg image.

    I pretty sure it can be disabled somehow but not sure how inside the editor.

    you can name your bg (double click it) and set bitmap only for that widget
    QWidget #mybox {
    background-image: url(:/Untitled-1.png);

    here i called bg mybox.

    Then it works as expected

  • @mrjj thank you very much.
    It also solved my inherit problem on my next "page".

  • Lifetime Qt Champion

    Super. :)
    I find it works best if I only assign style sheet to MainWindow / dialog
    and use the # syntax to address the widgets I want to style by name.
    At least I find it easier to control compared to give each widget its own style sheet.

  • @mrjj is it possible to group some widgets? And if so how?
    In my new Form I have 10x10 Text Browser to form a table and I'd like to assign a certain stylesheet to it. They are named "Scoreboard_1" to "Scoreboard_100".

    I put each row into a separate horizontalLayout so I have the option to hide the last 5 Layouts in a differrent setting.

  • Lifetime Qt Champion

    What you mean by group ?
    If you put them all in a widget/frame, they all have that as parent and sort of a group then.
    And if you then set style on that container, all in will get the style.
    If you mean a style group , sort of ?

    You can also set it for all Text Browser type. on main if its a global style for those ?

    Also note that you can use dynamic properties to target "some" of the widgets

    border: 3px solid rgb(20,15,255);

    so if editFocus is true the style is used. NOTE. changing editFocus from code, does not reapply the style.
    Also note that you can easy create own flags like editFocus in the editor.

  • @mrjj

    The number 1 box in the picture should be a "stylegroup" so i can assign a specific font to these without typing the the stylesheet for every textBrowser. Number 2 shouldnt be influenced by it and have it own font.

    ok, found the frame widget.

  • Lifetime Qt Champion

    just a note so im sure you know.

    when you say

    QTextBrowser {

    it its for all QTextBrowser instances of the parent where you set stylesheet.
    So if on the mainwindow, it will be all.

Log in to reply