How to set background color to Row?

Question

I am trying to give Background color to Row element in my app. So far I archived this with rectangle but it is messing up Images in MouseArea

Here is my code:-

import QtQuick.Controls  2.4
import QtQuick 2.11

ApplicationWindow {

        id:rootAppWin
        width:640
        height:480
        visible: true

        StackView {

                id: rooAppStack
                anchors.bottomMargin: 50
                anchors{
                        fill:parent
                }
        }

        //Bottom Buttons
        Row{

                Rectangle {
                        color: "#19d4d4d4"
                        anchors.fill:parent
                }

                id:rootNavButtons
                anchors{
                        top: rooAppStack.bottom
                        right: parent.right
                        bottom: parent.bottom
                        left: parent.left
                        topMargin: 5
                }

                MouseArea {
                        id:marootback
                        width: parent.width/2
                        height: parent.height
                        Image {
                                id: marootbackimg
                                fillMode: Image.PreserveAspectFit
                                source: "qrc:/img/sideswipe.svg"
                                anchors.fill:parent
                        }
                }

                MouseArea {
                        id:maroothome
                        width: parent.width/2
                        height: parent.height
                        Image {
                                id: maroothomeimg
                                fillMode: Image.PreserveAspectFit
                                source: "qrc:/img/tent.svg"
                                anchors.fill:parent
                        }
                }


        }
}

It messes up the images:-

Without rectangle it works great but I can't set background color . What should I do ?

Answer 1

Put Row in Rectangle

    Rectangle {
            color: "#19d4d4d4"
            anchors{
                    top: rooAppStack.bottom
                    right: parent.right
                    bottom: parent.bottom
                    left: parent.left
                    topMargin: 5
            }
            Row{
                    anchors.fill:parent
                    id:rootNavButtons
                    MouseArea {
                            id:marootback
                            width: parent.width/2
                            height: parent.height
                            Image {
                                    id: marootbackimg
                                    fillMode: Image.PreserveAspectFit
                                    source: "qrc:/img/sideswipe.svg"
                                    anchors.fill:parent
                            }
                    }

                    MouseArea {
                            id:maroothome
                            width: parent.width/2
                            height: parent.height
                            Image {
                                    id: maroothomeimg
                                    fillMode: Image.PreserveAspectFit
                                    source: "qrc:/img/tent.svg"
                                    anchors.fill:parent
                            }
                    }

            }

    }