Xamarin Forms Background Image not showing up on android and not scaling correctly on iOS

Question

I'm trying to set my image as a background for my app using BackgroundImage = "background.jpg", but I can't seem to scale it in any way in order to fit the whole image into the app, also, it doesn't show up at all on android. Here is the code and background image:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage Padding="0, 40, 0, 0" 
             xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             x:Class="RoseySports.Login_Page" 
             BackgroundImage="Background.jpg">


        <StackLayout HorizontalOptions="Center" VerticalOptions="Center">

        <Label Text="Email" HorizontalOptions="Center"/>
        <Entry Keyboard="Email" WidthRequest="300" x:Name="email"/>


                <Label Text="Password" HorizontalOptions="Center"/>
                <Entry IsPassword="true" WidthRequest="300" x:Name="password"/>

            <Button Text="Login" x:Name="login" Clicked="Handle_Clicked" TextColor="Navy"/>

    </StackLayout>
</ContentPage>

background.jpg ios adroid

Answer 1

1.To use BackgroundImage property BackgroundImage="Background.jpg" in IOS you need to add the required image to an IOS asset catalog. Xamarin.Forms WILL NOT load an image into the BackgroundImage property when it is located in the Resources folder as for versions of IOS pre 7. Read more for IOS asset catalog here.

2.You can also achieve this using Grid.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml">
    <Grid>
        <Image Aspect="AspectFill" x:Name="BGImageLogin" Source="Background.jpg" />
        <ScrollView>
        <StackLayout >
            <Entry Placeholder="Username"/>
            <Entry Placeholder="Password"
                      IsPassword="True"/>
            <Button Text="Login""/>
        </StackLayout>
        </ScrollView>
    </Grid>
</ContentPage>

Answer 2

Got it working by using this instead:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" 
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
             x:Class="RoseySports.Login_Page">  

        <AbsoluteLayout VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">

        <Image AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1"
            Source="background.jpg" Aspect="AspectFill"/>

        <ScrollView AbsoluteLayout.LayoutFlags="All" AbsoluteLayout.LayoutBounds="0, 0, 1, 1">


        <StackLayout Padding="0, 40, 0, 0" HorizontalOptions="Center" VerticalOptions="Center" Grid.Column="0" Grid.Row="0">

        <Label Text="Email" HorizontalOptions="Center" TextColor="White"/>
        <Entry Keyboard="Email" WidthRequest="300" x:Name="email"/>


                <Label Text="Password" HorizontalOptions="Center" TextColor="White"/>
                <Entry IsPassword="true" WidthRequest="300" x:Name="password"/>

            <Button Text="Login" x:Name="login" Clicked="Handle_Clicked" TextColor="Navy"/>

    </StackLayout>
        </ScrollView>
        </AbsoluteLayout>
</ContentPage>