Try ShortPoint nowBy default, your SharePoint header has a basic design:
This article will demonstrate how to add a background image to the Header of your SharePoint page using the ShortPoint Code Editor Web Part:
TABLE OF CONTENTS
Prerequisite
- You must already have the ShortPoint Code Web Part installed on your SharePoint page. To learn how to do this, check out How to Install ShortPoint Code Editor in SharePoint.
Quick Walkthrough
1. Copy the code below and replace the background-image URL value with the background image URL you want to use:
shortpoint.$('[class*=headerRow-]').css({ 'background-image': 'url(https://yourimageurl.jpeg)', 'background-position': 'center', 'background-size': 'cover'});2. Go to your SharePoint page and add the ShortPoint Code Web Part.
3. Click the Edit Properties icon of the ShortPoint Code to edit it.
4. Paste the copied code in the JavaScript field, customize it to your needs, and click Save.
5. Close the ShortPoint Code window.
6. Republish the page.
Step-by-step Tutorial
Go through the steps to learn how to add a background image to your SharePoint Header. We will be using a JavaScript Code to accomplish this.
Step 1: Copy the JavaScript Code
Copy the JavaScript code below:
shortpoint.$('[class*=headerRow-]').css({ 'background-image': 'url(https://yourimageurl.jpeg)', 'background-position': 'center', 'background-size': 'cover'});Replace the background-image URL value with the background Image URL you want to use. See the example below for your reference:
shortpoint.$('[class*=headerRow-]').css({ 'background-image': 'url(https://shortpoint-templates.s3.us-west-2.amazonaws.com/Airlines-1/airlines_1_6.jpeg)', 'background-position': 'center', 'background-size': 'cover'});Step 2: Add the ShortPoint Code Web Part
Go to the SharePoint page where you want to add a Header Background and click Edit:
Click the close icon to leave the Toolbox:
Select the plus icon to add a web part:
Use the search bar to look for ShortPoint Code, or scroll down until you see the Advanced section. Click ShortPoint Code:
Step 3: Edit the ShortPoint Code Web Part
Click the Edit Properties icon:
Step 4: Paste the Code
Click the Edit JavaScript field:
Paste the code in the space provided:
You can directly edit the code in the code editor. Freely customize the code according to your needs and click Save:
NOTEMake sure that Sandbox Mode is disabled. Otherwise, the JavaScript code will not be applied properly.
Step 5: Delete Default Codes
Delete default codes inside the Edit HTML field and Edit CSS field:
Step 6: Republish Page
Once satisfied, click the close icon to leave the ShortPoint Code window:
Click Republish once you’re ready to make your changes live:
Congratulations! You've successfully added a background image to your SharePoint Header:
We listed below more ways to use the ShortPoint Code Editor. Check them out now!
- How to Add an X Post to a SharePoint Page
- How to Add an Instagram Post to a SharePoint Page
- How to Add a LinkedIn Post to a SharePoint Page
- How to Add a Viva Engage Feed to a SharePoint Page
- How to Embed a YouTube Video Playlist to a SharePoint Page
- How to Embed a Vimeo Video Playlist to a SharePoint Page
- How to Add a Stock Widget to a SharePoint Site
- How to Embed a Weather Widget to a SharePoint Page
