Full background image in Service Portal

[gomathyshankar]

Hi,

I am trying to add a background image in Service portal but the entire image is not coming only half the image is coming.Could some please help me.

I am getting this now

But I want below mentioned entire image in the container

[ahammoud]

In what Record exactly do you Add the class ?

[lSurya 24]

Hello Selvakumar,

Refer to the below screenshot. You have to go to page in Portal -> pages -> your page and write the below code with your image URL. it will fetch you the complete image in the screen.

Code:

body {

background-image:url("your image name");

background-size:cover;

}

[chirag_bagdai]

Hi Surya,

Per my understanding, Selvakumar is trying to change the background image of   Homepage Search container and for that you don't need to add custom CSS because Service Portal add that CSS when you select Background Style as   "Cover". Please find below screenshot for reference :

[lSurya 24]

Hello Chirag,

Sometimes even if you make cover from container also. The page renders the cover image upto the widgets placed. If suppose a simple list which is placed but empty. So because it is empty it will show the list and widget will be hided until and unless we want it show even if it is empty. In that case cover image only renders until the last widget placed on that page. if the widget only occupies half page. then cover page to occupies only that much amount which I faced with OOB portal login page. The solution which i proposed was based on.my experience.

[Blaze2]

Old post and not sure if the requirement is the full page or just the container?

If it is just the container, I have the same requirement. If it is the entire page though, you can pretty much copy the Page Specific CSS from the Landing page: Service Portal > Pages> Search for Landing.

Then copy the PSCSS code and just replace the image url with the name of your image. (Be sure that you saved the image to SNs repository prior to this, or you will not see the image)

main.page, main.body {

  height: 99vh;

  min-height: 100%;

  padding-top: 0px !important;

}

section.page {

  background-image: url('CHANGE THIS');

  background-position: center center;

  background-size: cover;

  background-repeat: no-repeat;

  background-color: #3A3F50;

}

section.page main.body:before {

  display: block;

  background-color: #3A3F50;

  opacity: 0.75;

}