> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Customize Backgrounds for Landing Pages

> Customize backgrounds with colors, images, and gradients to enhance design and create visually engaging landing pages.

The Background section lets you control how elements look behind their content. You can apply colors, images, or gradients depending on the type of element.

You’ll find these settings in the **right-side panel** when selecting an element.

***

## Where to Find It

1. Select an element (section, container, button, etc.)
2. Go to the **right panel**
3. Open the **Background** section

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/OxODOtVy1KOg0VAr/images/background.png?fit=max&auto=format&n=OxODOtVy1KOg0VAr&q=85&s=91eca7dd15d69ff97054a9dcc20eb437" alt="Background" width="1306" height="988" data-path="images/background.png" />
</Frame>

***

## Background Types

Different elements support different background options.

### None (X)

* Removes any background
* The element becomes transparent

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/OxODOtVy1KOg0VAr/images/image-10.png?fit=max&auto=format&n=OxODOtVy1KOg0VAr&q=85&s=0baf80fd0e2d83faff4ab5916cbc40de" alt="Image" width="286" height="111" data-path="images/image-10.png" />
</Frame>

### Color

* Apply a solid color
* You can use:
  * Color picker
  * RGB values

👉 Most commonly used for buttons, sections, and containers

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/OxODOtVy1KOg0VAr/images/image-13.png?fit=max&auto=format&n=OxODOtVy1KOg0VAr&q=85&s=297d03f6b7c587b916c84a5cb734a799" alt="Image" width="275" height="145" data-path="images/image-13.png" />
</Frame>

### Image

* Set an image as the background
* Available mainly for larger elements like sections or containers

Options include:

* Upload or change image
* Adjust size (fit, cover, etc.)

👉 Not available on smaller elements like buttons

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/OxODOtVy1KOg0VAr/images/image-11.png?fit=max&auto=format&n=OxODOtVy1KOg0VAr&q=85&s=e060d412aa31ef3de08f4aef54f569c1" alt="Image" width="278" height="336" data-path="images/image-11.png" />
</Frame>

### Gradient

* Create a smooth transition between colors

Options include:

* **Linear** or **Radial** style
* Angle control
* Multiple color stops

👉 Great for modern UI and visual depth

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/OxODOtVy1KOg0VAr/images/image-12.png?fit=max&auto=format&n=OxODOtVy1KOg0VAr&q=85&s=c202d976cb8a2e88277bb318ef7cb314" alt="Image" width="282" height="277" data-path="images/image-12.png" />
</Frame>
