Circular image as button PyQt5

I'm trying to create a circular button with an image. So far I've been able to create a circular button and a button with an image background but I haven't been able to combine the two.

Here is my current code:

import sys
import PyQt5.QtWidgets


class Window(PyQt5.QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__()

        # setting title
        self.setWindowTitle("Python ")

        # setting geometry
        self.setGeometry(100, 100, 600, 400)

        # calling method
        self.UiComponents()

        # showing all the widgets
        self.show()

    # method for widgets
    def UiComponents(self):
        button = PyQt5.QtWidgets.QPushButton("CLICK", self)
        button.setGeometry(200, 150, 100, 100)

        # Background img and circular
        button.setStyleSheet('''border-radius : 5;
        border : 2px solid black
        background-image : url(image.png);
        ''')

        # adding action to a button
        button.clicked.connect(self.clickme)

    # action method
    def clickme(self):
        print("pressed")



App = PyQt5.QtWidgets.QApplication(sys.argv)
window = Window()
sys.exit(App.exec())

Solution

Qt documentation has a section exactly about this topic:

When styling a QPushButton, it is often desirable to use an image as the button graphic. It is common to try the background-image property, but this has a number of drawbacks: For instance, the background will often appear hidden behind the button decoration, because it is not considered a background. In addition, if the button is resized, the entire background will be stretched or tiled, which does not always look good.

It is better to use the border-image property, as it will always display the image, regardless of the background (you can combine it with a background if it has alpha values in it), and it has special settings to deal with button resizing.

So, you must ensure that you're using a square (not rectangular) image with the circle margins right at the edges, and use border-image instead of background-image (which tiles the image if it's smaller than the button size); note that you should not set any border in the stylesheet.


    button.setStyleSheet('''
        border-image: url(image.png);
        ''')

You obviously need to always use the same value for both the height and the width of the button, possibly by using setFixedSize(), otherwise if you add the button to a layout it will not be circular any more.