Kivy button background image size

Question

I am new to Kivy, I am trying to use kivy and scrollview. I need to stop the button background image from stretching, I would like the buttons to look like the 1st image. I am using background_normal to add the background image to the button. Do I need to change the row_default_height: root.height*0.3 in the gridlayout? or do I add a image height and width on each button? How do I stop the image from resizing ?

any help would be good, Thank you :)

My .kv file

#: import FadeTransition kivy.uix.screenmanager.FadeTransition
#: import GridLayout kivy.uix.gridlayout
#: import BoxLayout kivy.uix.boxlayout
#: import ButtonBehavior kivy.uix.button
#: import Image kivy.uix.image
#: import Window kivy.core.window.Window
ScreenManager:
    transition: FadeTransition()
    MainScreen:
    AnotherScreen:

<MainScreen>:
    name: "main"
    BoxLayout:
        ScrollView:
            GridLayout:
                some_property: setattr(Window, 'fullscreen' , 'auto')  or 'real_value!'
                id: container_y
                size_hint_y: None
                cols: 2
                row_default_height: root.height*0.3
                height: self.minimum_height
                Image:
                    source: "teaflav/Crushes.png"
                Button:
                    background_normal: 'teaflav/Crushes.png'
                    on_release: app.root.current ="other"
                    height: 40
                Button:
                    background_normal: 'teaflav/Crushes.png'
                    on_release: app.root.current ="other"
                    height: 40
                Button:
                    background_normal: 'teaflav/Crushes.png'
                    on_release: app.root.current ="other"
                    height: 40
                Button:
                    background_normal: 'teaflav/Crushes.png'
                    on_release: app.root.current ="other"
                    height: 40
                Button:
                    background_normal: 'teaflav/Crushes.png'
                    on_release: app.root.current ="other"
                    height: 40

Answer 1

Create an ImageButton by deriving a new class.

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.behaviors import ButtonBehavior
from kivy.uix.image import Image


kv = """
#: import FadeTransition kivy.uix.screenmanager.FadeTransition

ScreenManager:
    transition: FadeTransition()
    MainScreen:
        name: "main"
    AnotherScreen:
        name: 'other'

<AnotherScreen@Screen>:
    Button:
        text: 'Return to Main'
        on_release: root.manager.current = 'main' 
        

<MainScreen@Screen>:
    BoxLayout:
        ScrollView:
            GridLayout:
                id: container_y
                size_hint_y: None
                cols: 2
                row_default_height: root.height*0.3
                height: self.minimum_height
                Image:
                    source: "drink.png"
                ImageButton:
                    source: 'drink.png'
                    on_release: app.root.current ="other"
                    size_hint_y: None
                    height: 40
                ImageButton:
                    source: 'drink.png'
                    on_release: app.root.current ="other"
                    size_hint_y: None
                    height: 40
                ImageButton:
                    source: 'drink.png'
                    on_release: app.root.current ="other"
                    size_hint_y: None
                    height: 40
                ImageButton:
                    source: 'drink.png'
                    on_release: app.root.current ="other"
                    size_hint_y: None
                    height: 40
                ImageButton:
                    source: 'drink.png'
                    on_release: app.root.current ="other"
                    size_hint_y: None
                    height: 40
"""


class ImageButton(ButtonBehavior, Image):
    pass


class ImageButtonApp(App):
    def build(self):
        return Builder.load_string(kv)


ImageButtonApp().run()