When using a **Container with a background image**, a scrollbar may appear inside the banner if the content exceeds the height of the image.

This behavior occurs when the option “**Use image height for container**” is enabled, as the container keeps a fixed height based on the visual.

To ensure a clean and consistent display, it’s important to balance the amount of content with the available space.



 

 

 



 

 

   ![Worker on an orange bridge](/sites/g/files/dvc2391/files/styles/crop_freeform/public/image/2026/01/capture_video-0008.jpg.webp?h=fc692af3&itok=f8lBd6Uf)   





 

 

 

 

 





## Step 1 | Add a Container with background image

First, open the page editor and give your page a title.

Click on Add Container and configure the following settings:

- Add a title
- Upload a background image
- Enable “*Use image height for container*”
- Select Background style: Cover – Full width
- Choose Width: Wide

This setup creates a banner with a fixed height based on the image.



 

 

 



 

 

   ![step one scrollbar tutorial ](/sites/g/files/dvc2391/files/styles/media/public/image/2026/04/ezgif.com-video-to-gif-converter%20%281%29_0.gif?itok=hhEGuU09)   





 

 





 

 

 

 





 

 

 

 





## Step 2 | Add content inside the banner

Inside the container, you can add different content types such as:

- Text blocks
- CTAs
- “Content with Aside” components

For example, you may:

- Add a title (H2)
- Insert text content
- Embed a CTA
- Use a 50/50 layout for structured content



 

 

 



 

 

 

 





 

 

 

 





 

 

 

 





### ⚠️ Important behavior

If the total content becomes **higher than the image height**, the container will display a **scrollbar inside the banner**.

This is expected behavior based on the container configuration.



 

 

 



 

 

### ✅ Best practices

To ensure optimal rendering:

- Keep banner content **concise and focused**
- Avoid stacking too many components inside the banner
- Ensure the **image height matches the content volume**
- Be careful with **50/50 layouts**, which reduce available space
- Always **preview the page before publishing**



 

 

 



 

 

 

 





 

 

 

 






  .vsf-banner-guide {
    --red: #e30613;
    --black: #1f1f1f;
    --grey: #f6f6f6;
    --border: #e5e5e5;

    margin: 32px 0;
    font-family: Arial, Helvetica, sans-serif;
  }

  .vsf-banner-guide * {
    box-sizing: border-box;
  }

  .vsf-banner-guide__hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #1f1f1f 0%, #3a3a3a 100%);
    color: #fff;
    border-radius: 28px;
    padding: 42px;
    margin-bottom: 28px;
  }

  .vsf-banner-guide__hero::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -70px;
    width: 190px;
    height: 190px;
    background: var(--red);
    border-radius: 50%;
  }

  .vsf-banner-guide__hero-content {
    position: relative;
    z-index: 1;
    max-width: 760px;
  }

  .vsf-banner-guide__tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 18px;
  }

  .vsf-banner-guide__hero h2 {
    color: #fff;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.1;
    margin: 0 0 16px;
  }

  .vsf-banner-guide__hero p {
    color: #f1f1f1;
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
  }

  .vsf-banner-guide__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  .vsf-banner-guide__card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 22px;
    padding: 26px;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .vsf-banner-guide__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.09);
  }

  .vsf-banner-guide__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 20px;
    margin-bottom: 18px;
  }

  .vsf-banner-guide__card h3 {
    color: var(--black);
    font-size: 21px;
    margin: 0 0 10px;
  }

  .vsf-banner-guide__card p {
    color: #444;
    font-size: 15.5px;
    line-height: 1.6;
    margin: 0;
  }

  .vsf-banner-guide__highlight {
    margin-top: 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .vsf-banner-guide__do,
  .vsf-banner-guide__dont {
    border-radius: 22px;
    padding: 26px;
    border: 1px solid var(--border);
  }

  .vsf-banner-guide__do {
    background: #f7fbf8;
  }

  .vsf-banner-guide__dont {
    background: #fff7f7;
  }

  .vsf-banner-guide__do h3,
  .vsf-banner-guide__dont h3 {
    margin: 0 0 14px;
    font-size: 22px;
    color: var(--black);
  }

  .vsf-banner-guide__highlight ul {
    margin: 0;
    padding-left: 20px;
  }

  .vsf-banner-guide__highlight li {
    margin-bottom: 10px;
    line-height: 1.5;
  }

  .vsf-banner-guide__note {
    margin-top: 24px;
    background: var(--black);
    color: #fff;
    border-radius: 22px;
    padding: 26px;
    border-left: 7px solid var(--red);
  }

  .vsf-banner-guide__note strong {
    color: #fff;
  }

  .vsf-banner-guide__note p {
    margin: 0;
    color: #f1f1f1;
    line-height: 1.7;
  }

  @media (max-width: 900px) {
    .vsf-banner-guide__grid,
    .vsf-banner-guide__highlight {
      grid-template-columns: 1fr;
    }

    .vsf-banner-guide__hero {
      padding: 32px 26px;
      border-radius: 22px;
    }
  }
 Best practices

## Avoid scrollbars on background image banners

 When the option **“Use image height for container”** is enabled, the banner height is based on the image. If the content becomes too long, a scrollbar may appear inside the banner.

 

   1

### Keep it concise

 Use banners for short, high-impact messaging. Avoid long paragraphs or too many content blocks.

  2

### Check the layout

 Be careful with 50/50 layouts, CTAs and aside content, as they can quickly exceed the available height.

  3

### Preview the page

 Always check the rendering before publishing to make sure the banner remains clean and scroll-free.

   ### Recommended

- Short title
- Brief description
- One main CTA
- Image height adapted to the content
 
 

### Avoid

- Long text blocks inside the banner
- Too many stacked components
- Dense 50/50 layouts
- Publishing without checking the preview
 
 

   **Key takeaway:** maintaining the right balance between content length, image height and layout structure helps prevent overflow and ensures a clean banner display.