Skip to main content

Hi All, 

 

I have created a website using Experience Builder with three tabs: Home, Policy, and Declaration. The Home page has a background image that displays perfectly. However, when I navigate to the Policy or Declaration pages, the background image appears differently and turn out small in size .

I tried applying the same settings from the Home page to the Policy and Declaration pages, but the background image on those pages appears larger. If I adjust the Home page to match the size of the Policy/Declaration background, the image on the Home page becomes too small. 

 

Issue: The background image looks correct on the Home page but appears smaller in size on the Policy and Declaration pages. Matching the settings across pages does not produce consistent results.

 

Question:

 How can I make the background image appear the same size and layout across all three pages? 

 

My Home page :

 

Background Image Size Inconsistency Across Pages in Experience Builder

Home page set up

 

image.pngMy POlicy/Declaration Page 

  

image.png

 

SetUp :

 

image.png

Thank you in advance  

  

@* Trailhead Official * @Praveen Biyani (Support) @Kermit Del Rosario @Bhavin Patel @Ramu Goud Sunkari (Support) @Salesforce Support @Certification Exam Resources @Salesforce Trailhead @Nikitha Gottumukkala (Support) @Assignment Help Switzerland @Hiroyoshi Iwakiri @Help Desk IT #Experience Cloud #Salesforce Developer #Salesforce Admin #Experience Site #Sales Cloud

8 risposte
  1. 28 ott 2025, 13:35

    @Roopa Sharma in your home page screenshot for the compact header settings, there is no image set there, whereas in your My Policy page there is. in your home page screenshot for the compact header settings, there is no image set there, whereas in your My Policy page there is.

     

    CleanShot 2025-10-28 at 11.21.45.png

     

    Here is what I think is happening:

    • On your home page, you have the Hero component showing.
    • The background image is set for the Hero component, not in the header.
    • In your Theme Layout Settings, you have the Hero set to start under the header (which means the header will overlap the hero). CleanShot 2025-10-28 at 09.39.00.png
    • In your header you have the background color as clear.
    • So, with all this, your header is overlapping the hero, and it has a clear background, so the hero's background image is showing up through the header. Since the hero is fairly tall, that's why it looks so big.

    On your other pages, you don't have a hero and instead your header component is using a background image rather than being transparent.

0/9000