How to change game kivy background with picture

Question

Im trying to change background of my game's menu . But i can't seems to find a way to do it using kivy plugin.

here is my .kv file.

ScreenManagement :
    transition : FadeTransition()
    MainMenu :
    ThemeMenu :


<MainMenu> :
    name : 'main'

    Label :
        size_hint : 1 , 1

    Rectangle:
           pos: self.pos
           size: self.size
           source: 'Background.jpeg'


    Button :
        id : 'Play'
        background_normal : 'Play button.png'
        background_down : 'Play Button - Press.png'
        size_hint : 0.3 , 0.85
        pos_hint : {'x' : 0.04 , 'y' : 0.03}
        on_release : app.clickfx()

    Button :
        background_normal : 'Theme button.png'
        background_down : 'Themes button - Press.png'
        size_hint : 0.6 , 0.42
        pos_hint : {'x' : 0.35 , 'y' : 0.46}
        on_release : app.root.current = 'theme'
        on_release : app.clickfx()

    Button :
        background_normal : 'Setting button.png'
        background_down :  'Settings button - Press.png'
        size_hint : 0.295 , 0.42
        pos_hint : {'x' : 0.35 , 'y' : 0.03}
        on_release : app.clickfx()

    Button :
        background_normal : 'About button.png'
        background_down : 'Abouts button - Press.png'
        size_hint : 0.295 , 0.42
        pos_hint : {'x' : 0.655 , 'y' : 0.03}
        on_release : app.clickfx()

    Image :
        source : 'Header.png'
        size_hint : 1.2 , 1
        pos_hint : {'x' : -0.1, 'y' : 0.51}

    Image :
        source : 'Pong X.png'
        size_hint : 0.1 , 0.1
        pos_hint : {'x' : 0.005 , 'y' : 0.92 }


<ThemeMenu> :
    name : 'theme'

Any help is appreciated :D

Answer 1

Solution

To change the background of a screen, in kv file, use canvas.before:, Rectangle: and source:. Please refer to snippets below for details.

Set Background Image

<MainMenu> :
    name : 'main'

    canvas.before:
        Rectangle:
            pos: self.pos
            size: self.size
            source: 'pokemon.jpeg'  # 'Background.jpeg'

Screen Manager

In <MainMenu>: replace app.root.current with root.manager.current

Screen's default property manager

Each screen has by default a property manager that gives you the instance of the ScreenManager used.

Output