# Button Background Image

**URL:** <https://forums.fusetools.com/t/button-background-image/3944>\
**Category:** How-to Discussions\
**Created:** [January 27, 2016, 10:52am UTC](https://forums.fusetools.com/t/button-background-image/3944 "2016-01-27T10:52:23Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Paul2](https://avatars.discourse-cdn.com/v4/letter/p/df705f/32.png) [@Paul2](https://forums.fusetools.com/u/Paul2)\
**Post date:** [January 27, 2016, 10:52am UTC](https://forums.fusetools.com/t/button-background-image/3944/1 "2016-01-27T10:52:23Z")

</div>

Hello,

I’ve been playing around with this code I found in the forum but I’m struggling with implementing an image as a button background rather than a colour. Is it possible to do and also to include text over the image on the button?

Also do I need to change ux:Class to ux:Global, include it in my MainView.ux and be able to use “ActionButton” to apply the styling to any button in the app?

Thanks in advance

```auto
<App>
  <Panel>
  <Button ux:Class="ActionButton" IgnoreStyle="true" ClipToBounds="false" 
  Margin="0,0,0,4" Padding="20,7,20,7" Name="self">
  <Fuse.BasicTheme.ButtonText ux:Name="buttonText" TextColor="#0A4C75" 
  Value="{Property self.Text}" TextAlignment="Center"/>
  <Rectangle Layer="Background" CornerRadius="25">
    <SolidColor ux:Name="buttonBg" Color="#fff"/>
    <Stroke Width="1" ux:Name="buttonStroke" Brush="#0A4C75"/>
  </Rectangle>
  <WhileHovering>
    <Change buttonStroke.Width="1" Duration="0.3" Easing="CircularIn"/>
    <Change buttonBg.Color="#0A4C75" Duration="0.3" Easing="CircularIn"/>
    <Change buttonText.TextColor="#fff" Duration="0.3" Easing="CircularIn"/>
  </WhileHovering>
  </Button>

  <Button ux:Class="SpecialButton" IgnoreStyle="true" ClipToBounds="False" 
  Margin="0,0,0,4" Background="#bdc3c7" Name="sself">
    <Fuse.BasicTheme.ButtonText TextColor="#FFF" Font="RobotoMedium" 
    Value="{Property sself.Text}" TextAlignment="Center"/>
  </Button>

  <Grid ColumnCount="2" Alignment="VerticalCenter">
    <ActionButton Text="Login"/>
    <SpecialButton Text="Button"/>
  </Grid>
  </Panel>
</App>

```

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [January 27, 2016, 11:30am UTC](https://forums.fusetools.com/t/button-background-image/3944/2 "2016-01-27T11:30:46Z")

</div>

Hi Paul!

You can use an `ImageFill` instead of a `SolidColor` in your background `Rectangle`. Something like this:

```auto
<Rectangle Layer="Background" CornerRadius="25">
    <ImageFill File="yourImage" ux:Name="buttonBg"/>
    <Stroke Width="1" ux:Name="buttonStroke" Brush="#0A4C75"/>
</Rectangle>

```

---

<div class="post-metadata">

**Author:** ![Paul2](https://avatars.discourse-cdn.com/v4/letter/p/df705f/32.png) [@Paul2](https://forums.fusetools.com/u/Paul2)\
**Post date:** [January 27, 2016, 11:52am UTC](https://forums.fusetools.com/t/button-background-image/3944/3 "2016-01-27T11:52:25Z")

</div>

Thanks, I’ll give it a try.

Cheers Kristian