---
title: "BackgroundLayerSpecification | JavaScript maps SDK"
description: "Documentation for MapTiler SDK"
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Type Alias BackgroundLayerSpecification

type BackgroundLayerSpecification \= {  
    [id](#id): string;  
    [layout](#layout)?: { visibility?: [VisibilitySpecification](https://docs.maptiler.com/sdk-js/api-reference/types/VisibilitySpecification/) };  
    [maxzoom](#maxzoom)?: number;  
    [metadata](#metadata)?: unknown;  
    [minzoom](#minzoom)?: number;  
    [paint](#paint)?: {  
        "background-color"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<[ColorSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ColorSpecification/)\>;  
        "background-color-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
        "background-opacity"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<number\>;  
        "background-opacity-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
        "background-pattern"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<  
            [ResolvedImageSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ResolvedImageSpecification/),  
        \>;  
        "background-pattern-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
    };  
    [type](#type): "background";  
}

##### Index

### Properties[](#properties)

[id](#id) [layout?](#layout) [maxzoom?](#maxzoom) [metadata?](#metadata) [minzoom?](#minzoom) [paint?](#paint) [type](#type)

## Properties[](#properties-1)

### id[](#id)

id: string

Unique layer name.

### `Optional`layout[](#layout)

layout?: { visibility?: [VisibilitySpecification](https://docs.maptiler.com/sdk-js/api-reference/types/VisibilitySpecification/) }

Layout properties for the layer.

#### Type Declaration

-   ##### `Optional`visibility?: [VisibilitySpecification](https://docs.maptiler.com/sdk-js/api-reference/types/VisibilitySpecification/)
    
    Whether this layer is displayed.
    
    #### Default[](#default)
    
    ```typescript
    "visible"
    ```
    

### `Optional`maxzoom[](#maxzoom)

maxzoom?: number

The maximum zoom level for the layer. At zoom levels equal to or greater than the maxzoom, the layer will be hidden.

### `Optional`metadata[](#metadata)

metadata?: unknown

Arbitrary properties useful to track with the layer, but do not influence rendering. Properties should be prefixed to avoid collisions, like 'maplibre:'.

#### Example[](#example)

```json
{"source:comment": "Hydrology FCCODE 460 - Narrow wash"}
```

### `Optional`minzoom[](#minzoom)

minzoom?: number

The minimum zoom level for the layer. At zoom levels less than the minzoom, the layer will be hidden.

### `Optional`paint[](#paint)

paint?: {  
    "background-color"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<[ColorSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ColorSpecification/)\>;  
    "background-color-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
    "background-opacity"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<number\>;  
    "background-opacity-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
    "background-pattern"?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<  
        [ResolvedImageSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ResolvedImageSpecification/),  
    \>;  
    "background-pattern-transition"?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/);  
}

Default paint properties for this layer.

#### Type Declaration

-   ##### `Optional`background-color?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<[ColorSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ColorSpecification/)\>
    
    The color with which the background will be drawn.
    
    #### Default[](#default-1)
    
    ```typescript
    "#000000"
    ```
    
-   ##### `Optional`background-color-transition?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/)
    
-   ##### `Optional`background-opacity?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<number\>
    
    The opacity at which the background will be drawn.
    
    #### Default[](#default-2)
    
    ```typescript
    1
    ```
    
-   ##### `Optional`background-opacity-transition?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/)
    
-   ##### `Optional`background-pattern?: [PropertyValueSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/PropertyValueSpecification/)<[ResolvedImageSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/ResolvedImageSpecification/)\>
    
    Name of image in sprite to use for drawing an image background. For seamless patterns, image width and height must be a factor of two (2, 4, 8, ..., 512). Note that zoom-dependent expressions will be evaluated only at integer zoom levels.
    
-   ##### `Optional`background-pattern-transition?: [TransitionSpecification](https://docs.maptiler.com/sdk-js/api-reference/types/TransitionSpecification/)
    

### type[](#type)

type: "background"