Background image in portal

Hafsa1
Mega Sage

Can multiple images can be loaded in service portal homepage and each rotating in 2-3 seconds intervals?

1 ACCEPTED SOLUTION

vaibhavbhatnaga
ServiceNow Employee
ServiceNow Employee

Try below in CSS

 

body{
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: fixed;
  animation-duration: 5s;
  animation-name: fade-bg;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: forward;

}

@keyframes fade-bg {
    0% {
        background-image: url('http://xxxxxx.jpg');
    }
    50% {
        background-image: url('http://xxxxxxx.jpg');
    }
    51% {
        background-image: url('http://xxxxxxxx.jpg');
    }
    100% {
        background-image: url('http://xxxxxxx.jpg');
    }
}

View solution in original post

4 REPLIES 4

vaibhavbhatnaga
ServiceNow Employee
ServiceNow Employee

Try below in CSS

 

body{
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: fixed;
  animation-duration: 5s;
  animation-name: fade-bg;
  animation-delay: 0;
  animation-iteration-count: infinite;
  animation-direction: forward;

}

@keyframes fade-bg {
    0% {
        background-image: url('http://xxxxxx.jpg');
    }
    50% {
        background-image: url('http://xxxxxxx.jpg');
    }
    51% {
        background-image: url('http://xxxxxxxx.jpg');
    }
    100% {
        background-image: url('http://xxxxxxx.jpg');
    }
}

Hi ,

I want on homepage background image. I can't find any CSS entry on this container.

Ujjawal Vishnoi
Mega Sage
Mega Sage

Hi Hafsa,

 

You can use carousel widget to achieve this. Please refer the link below.

https://docs.servicenow.com/bundle/kingston-servicenow-platform/page/build/service-portal/concept/carousel-widget.html

 

Hope this helps.

 

Regards,

Ujjawal

Maroof Ali
Tera Contributor

create a function that will work as a loop and define images path there in code statement and call the same function inside it.