How to add background image in column of a container in Service Portal

Vinit6
Tera Contributor

Hi All,

We have a requirement where we need to add a background image in the column of a container in Service Portal. I'm very new to ServicePortal.  Please find the below screenshot for your reference. In the below image you can find that for knowledge articles column there is a background image so how we can add that . Kindly help me regarding this.

Quick response will be much appreciated.

Thanks in advance

Vinit

2 REPLIES 2

ServiceNowI
Tera Contributor

  

Sunil S Kerudi
Tera Contributor

Hi @Vinit6 , 

pretty old question but I'm new to ServiceNow. I will provide the solution.

follow these steps

  1. Upload the Image which you want to use as the background for the column in Images (All>System UI> Images> new)
  2. copy the image name (e.g. example_image.png)
  3. Go to the page where you want to add the image, cntl + right click and open "Page in Designer".
  4. On the right top you can see page click ,open and add this code in the page specific css                                   .bg-img-for-col{
    background-size: 100%;
    background-image: url(<YOUR_IMAGE_NAME.PNG>);
    background-position: right;
    }
  5. Save and close the page
  6. select the column which you want to add the image and on the right top side you can see a pencil icon , click+ open. In the CSS class place the class name you copied(i.e. bg-img-for-col)
  7. save and you can see the bg image only in the column

 

If I could help you with your Query then, please hit the Thumb Icon and mark as Correct !!
Sunil S Kerudi