Add background image to navigation in .net maui

I would like to make a background image spread across the entire screen, and make the pages navigated to, display as a block in the center. Currently the background image code I have is not working and I'm unsure of how to go about displaying the other pages in a block.

<?xml version="1.0" encoding="UTF-8" ?>
<Shell
x:Class="Nova.AppShell"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:Nova"
xmlns:views="clr-namespace:Nova.View"
Shell.FlyoutBehavior="Locked"
BackgroundImageSource="Assets/BackgroundImage.png">
<!--<ShellContent
Title="Home"
ContentTemplate="{DataTemplate local:MainPage}"
Route="MainPage" />-->
<Shell.FlyoutHeader>
<Image Source="Assets/logo.png" HeightRequest="152"></Image>
</Shell.FlyoutHeader>
<Shell.FlyoutFooter>
<Label Text="Username" Padding="20"></Label>
</Shell.FlyoutFooter>
<FlyoutItem Title="Dashboard" Icon="dotnet_bot.png">
<Tab>
<ShellContent 
Title="Dashboard"
ContentTemplate="{DataTemplate views:DashboardPage}"/>
</Tab>
</FlyoutItem>
<FlyoutItem Title="Clients" Icon="dotnet_bot.png">
<Tab>
<ShellContent 
Title="Clients"
ContentTemplate="{DataTemplate views:ClientListPage}"/>
</Tab>
</FlyoutItem>
<FlyoutItem Title="Staff" Icon="dotnet_bot.png">
<Tab>
<ShellContent 
Title="Staff"
ContentTemplate="{DataTemplate views:StaffListPage}"/>
</Tab>
</FlyoutItem>
<FlyoutItem Title="Projects" Icon="dotnet_bot.png">
<Tab>
<ShellContent 
Title="Projects"
ContentTemplate="{DataTemplate views:ProjectsPage}"/>
</Tab>
</FlyoutItem>
<FlyoutItem Title="Finances" Icon="dotnet_bot.png">
<Tab>
<ShellContent 
Title="Finances"
ContentTemplate="{DataTemplate views:FundsPage}"/>
</Tab>
</FlyoutItem>
</Shell>

What you want to do does not fit with Shells design. Nor any other navigation scheme (such as NavigationPage); app navigation is done "page to page", and a page fills the screen.

Instead, create a single page. Inside it, have a ContentView. Change that ContentView to point to (contain) different content.

In App.xaml.cs, change line:

MainPage = new AppShell();

to:

MainPage = new MainPage();

Where MainPage.xaml is something like:

<ContentPage ...
x:Class="MyProject.MainPage">
<!-- numbers control the area surrounding the "middle area" -->
<Grid RowDefinitions="50,*,50" ColumnDefinitions="50,*,50">
<!-- covers the whole screen -->
<Image x:Name="backgroundImage" Grid.Row="0" Grid.RowSpan="3"
Grid.Column="0" Grid.ColumnSpan="3" Source=... />
<!-- "middle area". It is "on top of" backgroundImage -->
<ContentView x:Name="content" Grid.Row="1" Grid.Column="1" />
</Grid>
</ContentPage>

MainPage.xaml.cs:

public partial class MainPage : ContentPage
{
  public MainPage()
  {
    InitializeComponent();
    content.Content = new MyView1();
  }

  public void GoView2()
  {
    content.Content = new MyView2();
  }
}

MyView1.xaml:

<ContentView ...
x:Class="MyProject.MyView1" />
...
</ContentView>

etc.

NOTE: MyView1 (etc.) don't have to be ContentView. Each can be any layout class, such as Grid or VerticalStackLayout.

OPTIONAL: To re-use views, use Service Provider instead of new MyView1()

See section "AppServiceProvider: USE SERVICE PROVIDER TO AVOID "new MyPage();"" of https://stackoverflow.com/a/76741424/199364.

As you become more familiar with Maui, you will see many suggestions to use Dependency Injection.

I've answered the question using content.Content = new MyView1();, because that is easier to understand, and get started with.

Applying the answer-section linked above, change this to:

content.Content = AppServiceProvider.GetService<MyView1>();

That section shows other coding you need to do, to make use of this technique.

I won't discuss here why you might want to do this.
Don't worry about this yet. Get new MyView1() working first.