[@rxap/directives](../wiki/globals) / BackgroundImageDirective

# Class: BackgroundImageDirective

Defined in: [background-image.directive.ts:56](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/directives/src/lib/background-image.directive.ts#L56)

## Extended by

- [`AvatarBackgroundImageDirective`](../wiki/Class.AvatarBackgroundImageDirective)

## Implements

- `OnChanges`
- `OnInit`

## Constructors

### new BackgroundImageDirective()

> **new BackgroundImageDirective**(`host`, `renderer`, `imageLoader`): [`BackgroundImageDirective`](../wiki/Class.BackgroundImageDirective)

Defined in: [background-image.directive.ts:74](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/directives/src/lib/background-image.directive.ts#L74)

#### Parameters

##### host

`ElementRef`

##### renderer

`Renderer2`

##### imageLoader

`ImageLoaderService`

#### Returns

[`BackgroundImageDirective`](../wiki/Class.BackgroundImageDirective)

## Properties

### imageUrl

> **imageUrl**: `undefined` \| `null` \| `string` = `null`

Defined in: [background-image.directive.ts:58](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/directives/src/lib/background-image.directive.ts#L58)

***

### placeholderImageUrl

> **placeholderImageUrl**: `string`

Defined in: [background-image.directive.ts:61](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/directives/src/lib/background-image.directive.ts#L61)

***

### position?

> `optional` **position**: `string`

Defined in: [background-image.directive.ts:70](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/directives/src/lib/background-image.directive.ts#L70)

***

### repeat?

> `optional` **repeat**: [`BackgroundRepeat`](../wiki/TypeAlias.BackgroundRepeat)

Defined in: [background-image.directive.ts:67](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/directives/src/lib/background-image.directive.ts#L67)

***

### size?

> `optional` **size**: `string`

Defined in: [background-image.directive.ts:64](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/directives/src/lib/background-image.directive.ts#L64)

## Methods

### ngOnChanges()

> **ngOnChanges**(`changes`): `void`

Defined in: [background-image.directive.ts:96](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/directives/src/lib/background-image.directive.ts#L96)

A callback method that is invoked immediately after the
default change detector has checked data-bound properties
if at least one has changed, and before the view and content
children are checked.

#### Parameters

##### changes

`SimpleChanges`

The changed properties.

#### Returns

`void`

#### Implementation of

`OnChanges.ngOnChanges`

***

### ngOnInit()

> **ngOnInit**(): `void`

Defined in: [background-image.directive.ts:84](https://gitlab.com/rxap/packages/-/blob/3eebed1be2bbb37bc0d65959f8fecbb850c0b8aa/packages/angular/directives/src/lib/background-image.directive.ts#L84)

A callback method that is invoked immediately after the
default change detector has checked the directive's
data-bound properties for the first time,
and before any of the view or content children have been checked.
It is invoked only once when the directive is instantiated.

#### Returns

`void`

#### Implementation of

`OnInit.ngOnInit`