• David Tessaro

Add a Background Image to Your Homepage

Updated: Oct 22, 2020

Do you have a killer image that would look awesome as the background of your portal? Well, follow these easy steps to make it a reality.

Step 1: Find and click on the Service Portal Configuration module in the navigator.


Step 2: Click on Designer.


Step 3: Look for your homepage in the list and open it. If you’re using the out-of-box homepage, it’s called index.


Step 4: Click on the button in the upper right, Edit Page Properties.


Step 5: In the Page Specific CSS field, comment the first property in the section.page selector. Then paste in this CSS right after that first line: background-image: url(homepage_bkgd.jpgx); background-repeat: no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center center;

Note, even if your image file name is not titled homepage_bkgd.jpg, that’s okay, use this name anyway.

Here’s what it will look like:


Step 6: Click Save. Now go to the Images module, and click New.


Step 7: Select the Service Portal category, and give the image the name we used in our CSS: homepage_bkgd.jpg.


Click the Click to add… link, and upload the image of your choice.


Use an image that is big enough to span a large screen without getting grainy. But, make sure it’s a compressed file size. Files over 1mb can take a moment to load, giving that less modern feeling when visiting the page. So use a compression tool (such as this free one) to bring down the file size.

Click Update to be save this image record.

Step 8: Now go to your portal and check it out!



#serviceportalhomepagebackground #serviceportalhowto #serviceportalhomepage #customizingserviceportal #serviceportal #serviceportalbackground

Read More: Recent Posts