how to change below background image

keval3
Tera Contributor

Hi All,

 

Please let me know how to change below background image. In Images I found this image with name sow_banner.svg I have change this image with mine but it will not work in landing page.

keval3_0-1681821110684.png

 

Thanks & Regards

K

 

3 REPLIES 3

sushantmalsure
Mega Sage
Mega Sage

hello,

you may want to refer 

www.servicenow.com/community/next-experience-forum/how-to-add-a-background-image-to-a-container-in-u...

similar is answered.

 

If my answer has helped with your question, please mark my answer as accepted solution and give a thumb up.
Regards,Sushant Malsure

Rahul Kumar17
Tera Guru

Hi @keval3 ,

 

To change the background image on a landing page, you will need to upload your new image to the ServiceNow instance and then update the URL of the background image in the landing page's HTML code.

Here are the steps to follow:

  1. Log in to the ServiceNow instance.

  2. Navigate to "System UI > Images" and upload your new image to the instance. Make note of the image's name and path.

  3. Navigate to "Service Portal > Pages" and open the landing page you want to modify.

  4. Click on the "Edit" button in the top-right corner of the page to open the page editor.

  5. In the editor, click on the "Source" button to view the HTML source code of the landing page.

  6. Look for the HTML code that sets the background image URL. This will typically be in a style block or a CSS file included in the landing page. The code may look something like this:

<style>
.landing-page-background {
background-image: url('/servlet/sn_uiservicenow/sow_banner.svg');
}
</style>

Replace the URL in the background-image property with the URL of your new image. The URL should be the path to the image you uploaded in step 2. For example:

 

 

<style>
  .landing-page-background {
    background-image: url('/servlet/sn_uiservicenow/my_new_image.svg');
  }
</style>

 

 

 

8. Save the changes to the landing page and exit the editor.

After completing these steps, the landing page should now display your new background image. Note that if the new image has different dimensions than the original image, you may need to adjust the CSS properties of the landing page to ensure the image is properly displayed.

If my response helped please mark it correct and close the thread.

Thanks,
Rahul Kumar

Hi @Rahul Kumar17,

I just want to do changes in Unified Navigation App I have comment background image code in the Composition after comment out that code. the image has been gone but when I am adding new image with URL at that time my new image is not getting display.I have written below code. please let me know what is the issue.

"items" : [{"styles":{"direction":"ltr","background-position":"right","background-repeat":"no-repeat","min-height":"200px","background-size":"auto 100%","margin-bottom":"-1.5rem","background-image":"happy.png"},"rules":{},"element_id":"container_1_default_slot"}],

 

Thanks & Regards

K