Add a wallpaper across your portal with custom CSS

Community Scripts
1

Hi everyone,

Want one background image across your portal, including behind your agent chats? This custom CSS creates a full-page wallpaper, so you don’t have to add the same image to individual pages or sections.

Here’s an example:

Portal wallpaper example
Portal wallpaper example1919×1003 282 KB

How to add it

  1. Upload your image somewhere that provides a public, direct image URL.
  2. In your portal’s custom code settings, paste the entire code below into the Header field.
  3. Replace YOUR-IMAGE-URL-HERE with your image’s URL. Keep the quotation marks.
  4. Save your changes and check your published portal.
<style>
  html,
  body,
  #__next,
  #__next > main {
    min-height: 100%;
    background: transparent !important;
  }

  #__next {
    position: relative;
    isolation: isolate;
  }

  /* Your portal wallpaper */
  #__next::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("YOUR-IMAGE-URL-HERE");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
  }

  /* Remove older wallpaper overlays */
  body::before,
  body::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
  }

  /* Let the wallpaper show through the portal home */
  #__next > main > div:first-child {
    background: transparent !important;
  }

  /* Let the wallpaper show through the hero section */
  #__next > main > div:first-child section:first-of-type {
    background: transparent !important;
  }

  /* Let the wallpaper show behind the open agent */
  [data-panel-group] > [data-panel] > div[class*="pickaxe-root"] {
    background: transparent !important;
  }

  /* Chat input styling */
  [data-panel-group] textarea {
    background: transparent !important;
  }

  [data-panel-group] textarea::placeholder {
    opacity: 0.7 !important;
  }

  /* Add a subtle shadow to help text remain readable */
  [data-panel-group] textarea,
  [data-panel-group] button,
  [data-panel-group] svg,
  [data-panel-group] p,
  [data-panel-group] h1,
  [data-panel-group] h2,
  [data-panel-group] h3,
  [data-panel-group] span {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  }
</style>

A few things to know

This code overrides the backgrounds on the portal home, its hero section, and the main agent container. Other sections or panels with their own backgrounds may still cover the wallpaper. It also removes existing body::before and body::after overlays, so check for conflicts if you already use those in other custom CSS.

This is a community CSS workaround, not a built-in wallpaper setting. It was shared and confirmed working in the original discussion. Future layout changes may require updates to the selectors.

To remove it, delete this style block from your custom code settings.

1 Like