---
product: "AG Charts"
title: "Background Image"
description: "A Background Image can be used for branding or watermarking a chart."
enterprise: true
framework: angular
version: "14.2.0"
related:
    - title: "Background"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/background/"
    - title: "Colours"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/colours/"
    - title: "Fills & Borders"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/fills-borders/"
    - title: "Layout"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/layout/"
    - title: "Overlays"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/overlays/"
    - title: "RTL Text & Layout"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/rtl/"
    - title: "Text"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/text/"
    - title: "Themes"
      url: "https://www.ag-grid.com/charts/archive/14.2.0/angular/themes/"
llms: "https://www.ag-grid.com/charts/archive/14.2.0/llms.txt"
---

# Background Image

A Background Image can be used for branding or watermarking a chart.

## Displaying an Image

To display a background image on a chart, simply provide a `url` for the `background.image` property. This could be a base64 encoded png or svg, or an external link to these files.

#### Background Image

```ts
// Angular entry point file
import '@angular/compiler';
import { bootstrapApplication } from '@angular/platform-browser';

import { AppComponent } from './app.component';

bootstrapApplication(AppComponent);
```

[Live example: Background Image](https://www.ag-grid.com/charts/archive/14.2.0/angular/background-image/examples/background-image/)

```js
{
    background: {
        image: {
            url: 'data:image/png;base64,iVBORw0...',
            width: 50,
            height: 50,
            right: 10,
            bottom: 10,
        },
    },
}
```

> **Note**
>
> When using an SVG image, ensure that the SVG has a valid `width`, `height`, and `viewBox` set on the top-level `<svg>` element.

## Position and size

The image is positioned in the centre of the chart container by default.

Use the `left`, `top`, `right` and `bottom` properties to specify the position of the image by defining the pixel distance between the image and the edge of the chart container. See the [API Reference](https://www.ag-grid.com/charts/archive/14.2.0/angular/background-image/#reference-AgChartBackground-image) for more details.

The `width` and `height` properties override the size of the image.

## API Reference

#### Background

| Property | Type | Default | Description |
| --- | --- | --- | --- |
| visible | boolean |  | Whether the background should be visible. |
| fill | CssColor |  | Colour of the chart background. |
| image | AgChartBackgroundImage |  | Background image. May be combined with fill colour. |
| image.url (required) | string |  | URL of the image. |
| image.left | PixelSize |  | Distance from the left border of the chart to the left border of the image. If neither left nor right specified, the image is centred horizontally. |
| image.top | PixelSize |  | Distance from the top border of the chart to the top border of the image. If neither top nor bottom specified, the image is centred vertically. |
| image.right | PixelSize |  | Distance from the right border of the chart to the right border of the image. If neither left nor right specified, the image is centred horizontally. |
| image.bottom | PixelSize |  | Distance from the bottom border of the chart to the bottom border of the image. If neither top nor bottom specified, the image is centred vertically. |
| image.width | PixelSize |  | Width of the image. If both left and width are specified, right is ignored. If only height is provided, width will be computed to preserve the original width/height ratio. If neither is provided, the original width is used. |
| image.height | PixelSize |  | Height of the image. If both top and height are specified, bottom is ignored. If only width is provided, height will be computed to preserve the original width/height ratio.  If neither is provided, the original height is used. |
| image.opacity | Opacity |  | Opacity of the image. |