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

[Szyk]

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:

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:

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