Is it possible to add an image to the background of the header on the Service Portal

[richelle_pivec]

Is it possible to add an image to the background of the header on the Service Portal? Our Marketing Department has a specific image they want us to use, and I can't figure out where to add the code or what code to even add.

Thanks,

Richelle

[Knight Rider]

Hi,

You Can, please refer to the below post

https://community.servicenow.com/community?id=community_question&sys_id=d9c603a5db1cdbc01dcaf3231f96...

[richelle_pivec]

Thank you for your suggestion, but that is more information about adding images in general. We've actually been able to add background images to our Service Portal and know all about adding images to the image library. I'm just wondering if I can add one to the Header, which is maintained in its own widget (instance), and, if so, how and where I would put the code.

Would it go in the Header Menu? The CSS for the Theme? Into the Header Widget that's referenced in the Theme itself? Or does it go in the basic CSS for the Portal where the Branding information is listed? I know that's where the background color for the header seems to be pulling from.

Thanks,

Richelle

[Sumanth16]

Hi ,

Please refer to below URL once:

https://community.servicenow.com/community?id=community_question&sys_id=743b0beddb5cdbc01dcaf3231f96...

Thanks,

Sumanth

[Steven Parker]

We use a Logo image on the Service Portal which replaces "Service Portal" in the top left corner with whatever image you would like.  

You can find this by going to Service Portal->Portals->Click on your Service Portal

On that page you will see logo and icon, but there is also a "Theme" choice on there as well.  Ours is using a custom theme.  Well if you navigate to that theme you will see CSS variables.  Ours has some things like the following:

$navbar-inverse-bg: #3a3f51 !default;
$navbar-inverse-link-color: #bdc0c4 !default;
$navbar-inverse-link-hover-color: #ffffff !default;

Maybe you could do $navbar-background-image: url("yoururl.jpg");

This is just a guess...trying to offer suggestions, but I think the change would need to be made in the theme associated with the Service Portal.

Another idea....

On each page, such as Index (under Service Portal->Pages) you can use custom CSS to modify things.  For example, the below CSS will make the header transparent if you add it to the CSS of the Index page.

.navbar{
position: fixed;
background: rgba(255, 255, 255, 0);
top: 0;
left: 0;
right:0;
padding: 0px;
z-index:10;
border-bottom:0px !important;}