Custom button with image does not display image nor align content to center

Hi
I have an idea to make my mobile app main screen with Qml and 4 buttons with images (with equal height automatically adjusted to screen). I try to do my custom button, but I failed with this. I have project attached to this post to facilitate dig in my problem for kindly person/programmer. In short: I want button with image and text. Image have to be above text and text should be in the bottom of the button (rest of height of the button will be covered by image). Image and text have to be displayed in center of the screen. Image should be scaled to actual button size. Button size can vary from mobile to mobile, so it can't be fixed. But I can guarantee that buttons will be only 4 and each should have height of 1/4 screen height.

What I done for now is my button widget and main window and I add free clipart from Internet. From my logic it should work as expected, but for some unknown reasons it display only text (not in center, not in bottom of the button), and the image is not displayed at all. I suppose that Column object in the MainFrom.ui.qml behave wrongly, or it's dimensions are calculated after calculation of the buttons content. But I don't know how to manage with this...

My Button Qml class is as follow:

Code:

---

import QtQuick 2.0
 
Rectangle {
    id: button
    width: 30
    height: 100
    property alias text: innerText.text
    property alias image: backgroundImage.source
    signal clicked
 
    Image {
        id: backgroundImage
        smooth: true
        anchors.top: button.top
        anchors.bottom: innerText.top
        fillMode: Image.PreserveAspectFit
        horizontalAlignment: Image.AlignHCenter
        source: "qrc:/Images/liftarn_Owl_on_book.svg"
    }
 
    Text {
        id: innerText
        anchors.top: backgroundImage.bottom
        anchors.bottom: button.bottom
        color: "black"
        font.bold: true
        horizontalAlignment: Text.AlignHCenter
    }
 
    //Mouse area to react on click events
    MouseArea {
        anchors.fill: button
        onClicked: { button.clicked(); }
    }
}

---

I use it in MainForm.ui.qml class:

Code:

---

import QtQuick 2.4
import QtQuick.Controls 2.2
import "qrc:/Widgets"
 
 
//import "qrc:/src/Qml/Widgets/Button.qml"
Item {
    id: item1
    width: 400
    height: 400
 
    Column {
        id: column
        anchors.fill: parent
 
        Button {
            id: learning
            width: item1.width
            height: item1.height / 4
            text: qsTr("Learning")
        }
        Button {
            id: syncroniztion
            width: item1.width
            height: item1.height / 4
            text: qsTr("Syncronization")
        }
        Button {
            id: options
            width: item1.width
            height: item1.height / 4
            text: qsTr("Options")
        }
        Button {
            id: exit
            width: item1.width
            height: item1.height / 4
            text: qsTr("Exit")
        }
    }
}

---

please help me, thanks, and best regards
Szyk Cech