---
title: "Background Image"
enterprise: true
framework: angular
version: "14.1.0"
---

# 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/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](#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. |