service portal page height - full screen

[Pastupe]

Can you advice me how to make service portal page with uploaded image to full screen ?

Im not able to do it for some reason.

Second half (bottom part) of the page still remain white ... and I dont know where and how to make it so that image will be in the background on full screen

helsinki SN and service portal, thank you

/Petr

[Brad Tilton]

Hi Petr,

Getting a background image to scale full height isn't really a service portal specific issue, but that just means there are a ton of resources out there you can use. Generally it's just a bit of css and html. Here are a couple of links I found.

Perfect Full Page Background Image | CSS-Tricks

Bootstrap Full Height Background Cover Image - Stack Overflow

[Pastupe]

Hello and thank you for advice.

I think problem must be somewhere else with my knowledge

Look at the below page.

Is the problem container ? Should I call image somewhere else ?   Does the image apply to container only and this is the reson ?

What would you do if you would asked to build new service portal page where imafge should be on full screen ?

Please advise me to solve my problem

I need to have service portal page with full screen background image. On this page I then can add as many rows with widgets as I can, thank you

/Petr

[ChrisBurks]

Petr,

In your last screenshot is "sp-landing-back.jpg" the background image that you want to cover the whole page?

If so, according to your CSS it's being applied as the background image for the header element. If you want it to be used as the background image for the whole page then you need to apply it to the body element.

Note: Depending on the image size, it may not cover the whole page. Or you may need to use certain css properties to cover the whole page such as "background-size: cover". You may also need to adjust the position of the image depending upon what is desired to be displayed.

[Blaze2]

To cover the page with the image, 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;

}