# Image banner

Fully customizable image banner section with options for mobile and desktop devices including support for multiple buttons, and text options:

<figure><img src="/files/6P6xd4zpWlivNMtnPISz" alt=""><figcaption><p><strong>Each button block can contain multiple buttons</strong></p></figcaption></figure>

<figure><img src="/files/PoPc7FNI0jE6nM3TGztr" alt=""><figcaption><p><strong>Separate image options for Desktop and Mobile</strong></p></figcaption></figure>

### Section settings

Use the section settings to choose images for desktop and mobile, image position, and section height:

<figure><img src="/files/Bve6NeYI2sPOaoaEciYa" alt=""><figcaption></figcaption></figure>

> ***Tip***: Use the *Image height* setting to view the entire image without any cropping. Especially helpful for mobile devices. All other height options will automatically crop and position the image based on position and height settings selected. The provided mobile image option is designed to help by using a custom image which may work with different height options.

<figure><img src="/files/KajBK1xCioZkHtxJjtyD" alt=""><figcaption></figcaption></figure>

The overlay feature is only applied to the text area, adjust the color and opacity to help the text stand out over the image.&#x20;

Customize the text options and section spacing to finetune the design. The text area can be transparent or contain a background color:

<div><figure><img src="/files/NY8ccyyCH5KENV0sv6wO" alt=""><figcaption></figcaption></figure> <figure><img src="/files/EIIiSAYo3YPss9fG6eSY" alt=""><figcaption></figcaption></figure></div>

### Blocks

Add content blocks to customize the Image banner section. Individual blocks can be added multiple times and reordered for complete customization:

<figure><img src="/files/LPZubsqj8b7CAKMMj2uQ" alt=""><figcaption></figcaption></figure>

Add your content into each block and customize using the settings available to each block type. The Buttons block can have multiple buttons, add content to create each required button:

<figure><img src="/files/FbJ88JT53U0k1fNGWGrU" alt=""><figcaption></figcaption></figure>

Buttons are stacked on mobile and horizontal in a row on desktop. For stacked desktop buttons, add a second Button block. The second block will display below the first block:

<figure><img src="/files/YzMztCqlaK4CEgpjhijF" alt=""><figcaption></figcaption></figure>

## Transparent header

Blend your banner image with the header area:

<figure><img src="/files/oOyNpX9Ip6IPkYxcLjSV" alt=""><figcaption></figcaption></figure>

Here are some tips for the perfect transparent header and Image banner combination:

### **Header** section settings

1. Enable with the **checkbox** in the Header settings under Transparent header.
2. Add an alternate logo that works best for the transparent header effect. In our example, we have a white Alternate logo and the standard header logo is black.

<figure><img src="/files/YrU4I1BuMF8eppkCus4l" alt=""><figcaption><p><strong>Header settings</strong></p></figcaption></figure>

### **Image banner** section settings

1. Use the **Full width** option under Section spacing
2. Set **Padding top** to 0px (none)

<figure><img src="/files/Tn4MAHuDfikYVMGiPATh" alt=""><figcaption><p><strong>Image banner section settings</strong></p></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://pipeline.groupthought.com/sections/list-of-sections/image-banner.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.