New Feature: Background Image

app/qml/ApplicationSettings.qml

@@ -60,6 +60,10 @@ QtObject {
     property real contrast: 0.80
     property real brightness: 0.5
 
+    property bool useBackgroundImage: true
+    property string backgroundImage: ""
+    property real backgroundTint: 0.0
+
     property bool useCustomCommand: false
     property string customCommand: ""
 
@@ -174,6 +178,9 @@ QtObject {
 
     function composeProfileObject() {
         var profile = {
+            "useBackgroundImage": useBackgroundImage,
+            "backgroundImage": backgroundImage,
+            "backgroundTint": backgroundTint,
             "backgroundColor": _backgroundColor,
             "fontColor": _fontColor,
             "flickering": flickering,
@@ -265,6 +272,13 @@ QtObject {
     function loadProfileString(profileString) {
         var settings = JSON.parse(profileString)
 
+        useBackgroundImage = settings.useBackgroundImage
+                !== undefined ? settings.useBackgroundImage : useBackgroundImage
+        backgroundImage = settings.backgroundImage
+                !== undefined ? settings.backgroundImage : backgroundImage
+        backgroundTint = settings.backgroundTint
+                !== undefined ? settings.backgroundTint : backgroundTint
+
         _backgroundColor = settings.backgroundColor
                 !== undefined ? settings.backgroundColor : _backgroundColor
         _fontColor = settings.fontColor !== undefined ? settings.fontColor : _fontColor

app/qml/SettingsGeneralTab.qml

@@ -182,6 +182,67 @@ ColumnLayout {
         }
     }
 
+    GroupBox {
+        title: qsTr("Background Image")
+        signal opacity
+        ColumnLayout {
+            anchors.fill: parent
+            CheckBox {
+                id: useBackgroundImage
+                text: qsTr("Use background image instead of background color")
+                checked: appSettings.useBackgroundImage
+
+                property real lastOpacity: 0.0
+                property real thisOpacity: appSettings.windowOpacity
+                property real buffer: NaN
+                onCheckedChanged: appSettings.useBackgroundImage = checked, 
+                                  buttonUseBackground.enabled = appSettings.useBackgroundImage,
+                                  sliderBackgroundTint.enabled = appSettings.useBackgroundImage,
+                                  sliderOpacity.enabled = !appSettings.useBackgroundImage,
+
+                                  thisOpacity = appSettings.windowOpacity,
+                                  buffer = thisOpacity,
+
+                                  thisOpacity = lastOpacity,
+                                  lastOpacity = buffer,
+                                  appSettings.windowOpacity = thisOpacity
+
+            }
+            // Workaround for QTBUG-31627 for pre 5.3.0
+            Binding {
+                target: useBackgroundImage
+                property: "checked"
+                value: appSettings.useBackgroundImage
+            }
+            Button {
+                Layout.fillWidth: true
+                id: buttonUseBackground
+                text: qsTr("Open")
+                enabled: useBackgroundImage
+                onClicked: {
+                    fileDialogImage.callBack = function (url) {
+                        loadFile(url)
+                    }
+                    fileDialogImage.open()
+                }
+                function loadFile(url) {
+                    try {
+                        if (appSettings.verbose)
+                                    console.log("Opening file: " + url)
+
+                        image.source = url
+                        appSettings.backgroundImage = url
+                    } catch (err) {
+                        console.log(err)
+                        messageDialog.text = qsTr(
+                                    "There has been an error opening the file.")
+                        messageDialog.open()
+                    }
+                }
+            }
+        }
+    }
+
     GroupBox {
         title: qsTr("Screen")
         Layout.fillWidth: true
@@ -230,10 +291,25 @@ ColumnLayout {
                 visible: !appSettings.isMacOS
             }
             SimpleSlider {
+                id: sliderOpacity
+                enabled: !useBackgroundImage
                 onValueChanged: appSettings.windowOpacity = value
                 value: appSettings.windowOpacity
                 visible: !appSettings.isMacOS
             }
+            Label {
+                text: qsTr("Background Tint")
+            }
+            SimpleSlider {
+                id: sliderBackgroundTint
+                enabled: useBackgroundImage
+                onValueChanged: appSettings.backgroundTint = value
+                value: appSettings.backgroundTint
+            }
+            function reload() {
+                active = false
+                active = true
+            }
         }
     }
 
@@ -275,4 +351,21 @@ ColumnLayout {
             active = true
         }
     }
+    Loader {
+        property var callBack
+        id: fileDialogImage
+
+        sourceComponent: FileDialog {
+            nameFilters: ["Image files (*.png *.jpeg *.jpg)"]
+            selectMultiple: false
+            selectFolder: false
+            selectExisting: true
+            folder: shortcuts.pictures
+            onAccepted: callBack(fileUrl)
+        }
+
+        function open() {
+            item.open()
+        }
+    }
 }

app/qml/TerminalWindow.qml

@@ -48,6 +48,19 @@ ApplicationWindow {
 
     color: "#00000000"
 
+    background: Item {
+        Image {
+            source: appSettings.backgroundImage
+            anchors.fill: parent
+            fillMode: Image.PreserveAspectCrop
+        }
+        Rectangle {
+            color: "black"
+            opacity: appSettings.backgroundTint
+            anchors.fill: parent
+        }
+    }
+
     title: terminalTabs.currentTitle
 
     Action {