Experience builder background images & style

02-01-2023 09:09 AM
New Contributor III

Hey there, 

I want to add an image as the full page background for my experience (web version). It looks like I can only use a fill color for body contents/background. Seems silly there is no way to make a full page image background. 

If this is not possible, is it possible to have an image as the background to a block, AND* overlay it with a transparent color so that text can be visible? I am able to add an image for blocks, but no other customization options seem available. 

Thanks in advance for any help! 

0 Kudos
6 Replies
New Contributor III

That sounds similar to something I wanted to do -- Full screen image with text over top. 

How I did it (which may not be the 'best practices' method) was to use a text widget, make it full screen size, and make the background an image. I adjusted the position of the text with some blank lines. Then used Character Effects to make the white text stand out better against the picture.

Beth Ann
New Contributor III

Hi Beth, 

Thanks for that work around. I am trying something similar with an image card, but hoping that there is a better method! 

0 Kudos
Esri Regular Contributor

I've done a full page image card with a full page text card on top that had a transparent background color. Then I stacked cards on top of all that with my actual text so that I could ensure the positioning was where I wanted. 



- Jen
New Contributor III

That looks really good! Yeah, so far I am using the image cards with some success, but I wish I could have a set background image with text features scrolling over the image as the user goes down the page (parallax scroll). 

I do appreciate the help! 

0 Kudos
New Contributor

To add a static background image and have scrolling content layout in front of it:


  1. In Experienc Builder, choose "+ Create New" option. 
  2. Select the "Blank scrolling" template.
  3. Select the blank page and turn ON the Header. 
  4. You'll see a few icons in the blank Page, hover over them and select the option to insert a screen group. Choose the Showcase template.
  5. Keep only one Screen from the Screen Group (it will have 3 as a default). 

Helpful links:


Hope that helps!

Occasional Contributor

Just what I was looking for. I want a fullscreen background image + survey on top, but I want a scrolling page so I can have the footer (but the footer isn't intruding until one scrolls to the bottom).

I need to remind myself that not all of the goodies are sitting in the widget pane (at least, I don't see "screen" there). Thanks!

0 Kudos