Images and customization of portals

[danny_support]

Hi @brandoo ,

Thank you for reaching out!

The code you tried there needs a few adjustments to work properly. Please try this instead in the Header section of Website Code Injection:

<style>
  html, body, #__next, #__next > main {
    min-height: 100%;
    background: transparent !important;
  }

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

  /* Full-page wallpaper */
  #__next::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: url("https://images.pexels.com/photos/33545/sunrise-phu-quoc-island-ocean.jpg?cs=srgb&dl=pexels-pixabay-33545.jpg&fm=jpg"); /*YOUR IMAGE HERE */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none;
  }

  /* Kill any older overlay code if it is still present */
  body::before,
  body::after {
    content: none !important;
    display: none !important;
    background: transparent !important;
  }

  /* Portal home root wrapper */
  #__next > main > div:first-child {
    background: transparent !important;
  }

  /* Portal hero section */
  #__next > main > div:first-child section:first-of-type {
    background: transparent !important;
  }

  /* Open tool / agent root wrapper */
  [data-panel-group] > [data-panel] > div[class*="pickaxe-root"] {
    background: transparent !important;
  }

  /* Keep the chat input area readable without adding a page-wide tint */
  [data-panel-group] textarea {
    background: transparent !important;
  }

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

  [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>

Just make sure to replace YOUR-IMAGE-URL-HERE with the direct public URL of the image you want to use.

This should give the portal a full-page wallpaper effect behind the main portal experience.

We also appreciate the feedback regarding native support for portal background images without requiring custom CSS injection. I have passed that feedback along to the team, and thank you as well for the feature request. It is being discussed internally.

Thank you again for bringing this up and for submitting the feature request.