How to Fix Background image for Header menu in service portal

Jayanthi
Tera Contributor

Hello friends,

I want to ffix background image to header menu. Please  suggest the dimension and that image should cover fully in header menu in service portal. how to do that?

its only half image is cornered on the left side of header menu. How to fix it shoud display entire bg for header menu not only in corner.

1 ACCEPTED SOLUTION

MS
Tera Expert

Hi ,

There is no good way to get the whole image to be visible and still fill the whole space.But, you can try below dimensions.

Background Image: Approximately 2300 x 1200, 1150 x 600, or images with similar percentages

The one I am using is 1920x1080, although that is probably a little on the large side (1920x800 or so is probably more reasonable).

Else you can follow the below steps:

  1. Add a class to the background image container record (for example: "img-contain")
  2. Add a style on the page or in the theme that sets that class as follows:
    .img-contain {
            background-size: contain;
            background-repeat: no-repeat;
    }

 

Do not forget to MARK THE ANSWER CORRECT, if it helps you!

Thanks!

View solution in original post

3 REPLIES 3

Ashutosh Munot1
Kilo Patron
Kilo Patron

HI,

Not exact answer but some hint on how to change images:

https://www.servicenowelite.com/blog/2019/1/26/service-portal-home-page

 

For you to change and fix header image you need to clone the header widget and put an image in it.


Thanks,
Ashutosh

MS
Tera Expert

Hi ,

There is no good way to get the whole image to be visible and still fill the whole space.But, you can try below dimensions.

Background Image: Approximately 2300 x 1200, 1150 x 600, or images with similar percentages

The one I am using is 1920x1080, although that is probably a little on the large side (1920x800 or so is probably more reasonable).

Else you can follow the below steps:

  1. Add a class to the background image container record (for example: "img-contain")
  2. Add a style on the page or in the theme that sets that class as follows:
    .img-contain {
            background-size: contain;
            background-repeat: no-repeat;
    }

 

Do not forget to MARK THE ANSWER CORRECT, if it helps you!

Thanks!

MS
Tera Expert

Thanks @Jayanthi