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!