How To Set Background Image in Kivy? (Image keeps on covering all other buttons & objects)

Question

I'm new to Kivy and I'm trying to create a simple desktop GUI for a small project. I found it confusing however, how to add a background image, and have spent days looking through the Kivy documentations and tutorials and forums trying to find a solution, but for some reason there is no explicit instructions on how to go about it. I really need your help. The instructions here did not help at all, as the Kivy docs were about adding a background color and having a picture over it. That's not what I need, I need to add a background picture for all the buttons and objects. I don't know how to send the background image backwards it keeps on surfacing above everything. I hope you can help me.

Here is my code:

# -*- coding: cp1252 -*-
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.image import Image
from kivy.animation import Animation
from kivy.uix.label import Label
from kivy.uix.widget import Widget
from kivy.clock import Clock
from kivy.graphics import Color, Rectangle
from kivy.uix.screenmanager import ScreenManager, Screen, FadeTransition
from kivy.uix.floatlayout import FloatLayout

# Create both screens. Please note the root.manager.current: this is how
# you can control the ScreenManager from kv. Each screen has by default a
# property manager that gives you the instance of the ScreenManager used.
Builder.load_string("""
<MenuScreen>:
    FloatLayout:
        Button:
            text: "LEARN"
            font_name: 'DK Lemon Yellow Sun.otf'
            font_size: '50sp'
            pos: 60, 180
            size_hint: .4, .4
        Button:
            text: "TRANSLATE"
            font_name: 'DK Lemon Yellow Sun.otf'
            font_size: '50sp'
            pos: 410, 180
            size_hint: .4, .4
        Button:
            text: "QUIT"
            font_size: '50sp'
            font_name: 'DK Lemon Yellow Sun.otf'
            pos: 60, 50
            size_hint: .1, .1
        Label:
            text: 'Education App'
            pos: -10, 200
            font_size: '70sp'
            font_name: 'DK Lemon Yellow Sun.otf'
        AsyncImage:
            source: 'blackboard.png'
            size_hint: 1, .7
            pos_hint: {'center_x':.5, 'center_y': .5}



<SettingsScreen>:
    BoxLayout:
        Button:
            text: 'My settings button'
        Button:
            text: 'Back to menu'
            on_press: root.manager.current = 'menu'
""")




class MenuScreen(Screen):
    pass


class SettingsScreen(Screen):
    pass


sm = ScreenManager(transition=FadeTransition())
sm.add_widget(MenuScreen(name='menu'))
sm.add_widget(SettingsScreen(name='settings'))



class TestApp(App):
    def build(self):
        return sm

if __name__ == '__main__':
    TestApp().run()

The resulting kivy output looks like this:

All help will be appreciated. Thank you. Thank you very much.

Answer 1

Add this after your <MenuScreen>: tag:

canvas.before:
        Rectangle:
            pos: self.pos
            size: self.size
            source: 'yourImage.png'