Schlagwort: background

Grid Hintergrundbild setzen mit XAML

Im XAML-Code kann man Hintergrundbilder in verschiedenen Arten bestimmen.

Für einen einfarbigen Hintergrund bietet sich Folgendes an:

1
2

<Grid Background="White">
</Grid>

Will man selber ein Hintergrundbild setzen, kann man das so machen:

1
2
3
4
5

<Grid>
  <Grid.Background>
    <ImageBrush ImageSource="Image.jpg"/>
  </Grid.Background>
</Grid>

Es ist auch möglich, selbst definierte Ressourcen zu verwenden:
Windows Phone 7-Beispiel

1
2
3
4
5
6
7
8
9

<phone:PhoneApplicationPage
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  ..>
  <phone:PhoneApplicationPage.Resources>
    <SolidColorBrush x:Key="MyBrush" Color="Gold"/>
  </phone:PhoneApplicationPage.Resources>
  <Grid Background="{StaticResource MyBrush}">
  </Grid>
</phone:PhoneApplicationPage>

Windows 8 App-Beispiel

1
2
3
4
5

<Page.Resources>
  <SolidColorBrush x:Key="MyBrush" Color="Gold"/>
</Page.Resources>
<Grid Background="{StaticResource MyBrush}">
</Grid>

background image mittig im div platzieren

#header
{
  width: 100%;
  height: 142px;
  background-image: url('./images/header.png');
  background-repeat: no-repeat;
  background-position: 50% 100%;
}

Mirror background image with CSS3

Here you can see how to mirror a background image with some cool new CSS3 attributes:

1
2
3
4
5
6
7
8
9
10
11
12
13

#background
{
  background-image: url('./images/myBackground.png');
  width: 1024px;
  height: 768px;
  /* Mirror the background image */
  -webkit-transform: scaleX(-1);
  -khtml-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
}