How to Add a Background Image to the Page Header using the ShortPoint Code Design Element

Usually, your SharePoint page has a white, blank header:

With the ShortPoint Code Design Element, you can add a background image to your SharePoint header. Follow the steps below to learn how.

Quick Walkthrough

1. Edit the ShortPoint Web Part.

2. Click the plus icon and insert the Code Design Element.

3. Copy the JavaScript code below and replace the background-image URL with the URL of the image you want to use:

/* header-background */
shortpoint.$('[class*=headerRow-]').css({  'background-image': 'url(https://yourimageurl.jpeg)',  'background-position': 'center',  'background-size': 'cover'});

4. Paste the code in the JavaScript field.

5. Go to the Design tab and disable Sandbox Mode.

6. Click the green checkmark to apply your changes.

7. Click Save to keep your changes.

8. Republish the page to see your new header.

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Insert the ShortPoint Code Design Element
  • Step 3: Copy and Paste String
  • Step 4: Disable Sandbox Mode
  • Step 5: Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed in your SharePoint environment.
• You must be a ShortPoint Designer with an active license.

Interactive Tutorial

Before starting the interactive tutorial, copy the code below and replace the background-image URL with the URL of the image you want to use:

/* header-background */
shortpoint.$('[class*=headerRow-]').css({  'background-image': 'url(https://yourimageurl.jpeg)',  'background-position': 'center',  'background-size': 'cover'});

Step-by-step Tutorial

Follow the detailed guide to learn how to use jQuery:

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit:

• Click the close icon to leave the Toolbox:

• Select the ShortPoint tag.
• Click the Edit Properties icon:

Step 2: Insert the ShortPoint Code Design Element

• Choose where you want to add the Code Design Element and click the plus icon to see the library of Design Element:

• Look for Code using the search bar and select it.

Step 3: Copy and Paste String

• Copy the JavaScript code below and replace the background-image URL with the URL of the image you want to use:

/* header-background */
shortpoint.$('[class*=headerRow-]').css({  'background-image': 'url(https://yourimageurl.jpeg)',  'background-position': 'center',  'background-size': 'cover'});

NOTEMake sure to not skip this step. Otherwise, the JavaScript code will not work as expected.