Full screen image in a metro windows 8 app - windows-8

Question

i am developing a Windows 8 "Metro" App. In this App I want to put an Image as a wallpaper.
The Image is 1600x900 Pixels big. Now, when i try a bigger Screen in the Simulator the Image
is not scaled to fill the whole Screen. How can i achieve this? I tried to follow the Microsoft
Guidelines for different Screen sizes, like for example putting the Image in a canvas, but it doesnt
work. Can someone help me?
Thank you very much

Answer 1

I am not sure what exactly what you have tried, or which guidelines your were looking at. But you can always add an ImageBrush to your Grid like this.
<Page
x:Class="App3.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:local="using:App3"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d">
<Grid>
<Grid.Background>
<ImageBrush ImageSource="Assets/img101.jpg"/>
</Grid.Background>
<TextBlock Name="txt1" HorizontalAlignment="Center" VerticalAlignment="Center" Text="Hello World" FontFamily="Arial" FontSize="60" ></TextBlock>
</Grid>
</Page>

Answer 2

In one of my apps, I use a full-screen image as a background watermark, by using the following CSS:
.watermark {
position: absolute;
z-index: -1;
width: 100%;
height: 140%;
opacity: 0.05;
}
then, in the markup, I simply add an image tag, with the watermark class:
<img class="watermark" src="#" />
In my case, I'm setting the image source dynamically in the page's JS file, like so:
element.querySelector(".watermark").src = item.maptileUrl;
the above line grabs the URL for the image (a map tile) from the selected item that was passed to the page.
I tested my app in the simulator, and it works regardless of the screen size and resolution.
Be aware that depending on what your image is, using a width/height of 100% could result in your image being stretched vertically or horizontally.
Another possibly easier solution is to simply set the background-image style of the body tag to the desired image. You can read more about this property at http://www.w3schools.com/cssref/pr_background-image.asp (along with the background-repeat, background-size, etc.).