RibbonWindowWithBackgroundImage.xaml

<fluent:RibbonWindow x:Class="FluentTest.RibbonWindowWithBackgroundImage"
                     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:converters="clr-namespace:FluentTest.Converters"
                     xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                     xmlns:fluent="urn:fluent-ribbon"
                     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                     Title="RibbonWindowWithBackgroundImage"
                     Width="800"
                     Height="600"
                     TitleBackground="Transparent"
                     TitleForeground="Black"
                     mc:Ignorable="d">
    <fluent:RibbonWindow.Resources>
        <converters:BackgroundImageViewportConverter x:Key="BackgroundImageViewportConverter" />

        <SolidColorBrush x:Key="Fluent.Ribbon.Brushes.RibbonTabControl.Background" Color="Transparent" />
        <SolidColorBrush x:Key="Fluent.Ribbon.Brushes.RibbonTabControl.Foreground" Color="Black" />

        <SolidColorBrush x:Key="Fluent.Ribbon.Brushes.RibbonTabControl.Content.Background" Color="{DynamicResource Fluent.Ribbon.Colors.White}" />
        <SolidColorBrush x:Key="Fluent.Ribbon.Brushes.RibbonTabControl.Content.Foreground" Color="Black" />
        <SolidColorBrush x:Key="Fluent.Ribbon.Brushes.WindowCommands.CaptionButton.Foreground" Color="Black" />
    </fluent:RibbonWindow.Resources>

    <Window.Background>
        <ImageBrush AlignmentX="Right"
                    AlignmentY="Top"
                    ImageSource="pack://application:,,,/Fluent.Ribbon.Showcase;component/Images/banner.png"
                    Stretch="Fill"
                    TileMode="None"
                    Viewport="{Binding ActualWidth, RelativeSource={RelativeSource AncestorType=Window}, Converter={StaticResource BackgroundImageViewportConverter}}"
                    ViewportUnits="Absolute" />
    </Window.Background>

    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <fluent:Ribbon Background="Transparent">
            <fluent:Ribbon.Menu>
                <fluent:Backstage />
            </fluent:Ribbon.Menu>

            <fluent:RibbonTabItem Header="First">
                <fluent:RibbonGroupBox Header="First">
                    <fluent:Button Header="First" />
                </fluent:RibbonGroupBox>
            </fluent:RibbonTabItem>

            <fluent:RibbonTabItem Header="Second">
                <fluent:RibbonGroupBox Header="Second">
                    <fluent:Button Header="Second" />
                </fluent:RibbonGroupBox>
            </fluent:RibbonTabItem>
        </fluent:Ribbon>

        <Grid Grid.Row="1"
              Background="{DynamicResource Fluent.Ribbon.Brushes.White}">
            <TextBlock Margin="5"
                       TextWrapping="Wrap">
                This sample shows how to use a background image for the titlebar.
            </TextBlock>
        </Grid>
    </Grid>
</fluent:RibbonWindow>