Kivy behavior of drawing in canvas, to change it's background

Question

I'm trying to set the background of my layout with the following kv language:

<RootWidget>:

    Menu:
        orientation: 'vertical'

        Button:
            text: 'btn1'
            on_release: print('btn1')
        Button:
            text: 'btn'
            on_release: print('btn2')

    BoxLayout:
        BoxLayout:
            canvas.before:
                Rectangle:
                    pos: self.pos
                    size: self.size
                    source: 'main_background.png'

            ToggleMenuButton:
                on_release: root.toggle_state()
                size_hint: None, None
                size: 60, 60
                background_color: 0, 0, 0, 0
                Image:
                    size: self.parent.size
                    pos: self.parent.pos
                    allow_stretch: True
                    source: './data/images/white_menu.png'

And this is my code:

from kivy.app import App
from kivy.garden.navigationdrawer import NavigationDrawer
from layouts.menu import Menu
from layouts.menu import ToggleMenuButton
from layouts.content import Content


class RootWidget(NavigationDrawer):
    pass


class MainApp(App):
    def build(self):
        self.root = RootWidget()
        return self.root


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

The Menu and Content classes are Kivy BoxLayout, the ToggleMenuButton is a Kivy Button.

When I run this code I get the following screen:

The background should be my image, not black. If I but the white_menu.png as my background, I also get a black braground. But, if put the following code:

    BoxLayout:
        orientation: 'vertical'
        BoxLayout:
            orientation: 'vertical'
            canvas.before:
                Rectangle:
                    pos: self.pos
                    size: self.size
                    source: 'main_background.png'

I get the following:

Like you can notice on the bottom, the image is transparent, with 3 white rectangles, but on the main layout the image is red. I kwnow that it is red, because the rgba code, but why the image changes it's color? If I put the background on canvas.after it works correctly, I can see my background, but I can't see the widgets.

Summing up, I want to understand what is happening? Why I cant see the changes on canvas.before? Why/How putting a color on my canvas changes my image?

If I change, the RootWidget to be a BoxLayout instead of a NavigationDrawer, it works correctaly. Why? Why changing the canvas of a child of a child of a NavigationDrawer does not work?