How to Customize the Background Design Element

This article will showcase the customizing options available for the Background Design Element. 

TABLE OF CONTENTS

• Prerequisite
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2:Insert the Background Design Element
  • Step 3: Add a Background
  • Step 4: Customize the Background’s design
  • Step 5 (Optional): Add a Design Element inside the Background
  • Step 6: Save
• Background Features
  • A. Content tab
  • B. Design tab
  • C. Advanced Tab
  • D. Custom CSS Tab

Prerequisite

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

Interactive Tutorial

Click Get Started to learn how to customize the Background Design Element:

NOTECheck out Background Features to learn more about the OOTB options you can customize.

Step-by-step Tutorial

Follow the steps below for a detailed guide on how to customize the Background Design Element:

Step 1: Edit the ShortPoint Web Part

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

• Click the ShortPoint tag.
• Select the pencil icon.

Step 2:Insert the Background Design Element

• Click the plus icon.
• Use the search box to look for Background and click it.

Step 3: Add a Background

• (Optional) Add Content.
• Add a [1] Background Image (click the folder icon or paste the URL of the image) or a [2] Background Video (paste the URL of the video).

• (Optional) If you choose to add a Background Image, you have the option to Enable Advanced Image Settings. Additional settings will be available for you to customize.

Step 4: Customize the Background’s design

• Navigate to the Design tab.
• Customize the Background according to your preferences.
• Once satisfied, click the green check mark.

NOTECheck out Background Features to learn more about the OOTB options you can customize.

Step 5 (Optional): Add a Design Element inside the Background

NOTEBackground is a content-holder Design Element. This means that you can add any other Design Element inside it.

• Hover over the Background tag and click it.

• Click the blue plus icon.

• Select the Design Element you want to display inside the Background.
• Customize the selected Design Element according to your preference.
• Click the green check mark once satisfied.

Step 6: Save

• Then, click the eye icon to see your page in real-time.

• Click Save to apply all your changes.

Background Features

Below are the options you can find in the Background Settings window:

A. Content tab

The Content tab allows you to customize the content of the Background. It has the following options:

SETTINGS

Content

allows you to add content inside the Background. The content field also has a Rich Text Editor. Check out the table below to see its editing features.

The Rich Text Editor allows you to customize how your text will appear on your page. It has the following options:

The Rich Text Editor also has ShortPoint Inline Design Elements. You can see them by clicking the ShortPoint icon:

It has the following options:

NOTECheck out Introducing Inline Design Elements Feature for ShortPoint Page Builder Live Mode and ShortPoint Page Builder Grid to learn more about Inline Design Elements.

BACKGROUND IMAGE

	Image	allows you to add a background image. You can add an image  [1] by clicking the folder icon or [2] by pasting the URL of the image you want to display.
	Enable Advanced Image Settings	when enabled, additional image settings will appear.
	Image Size	adjusts the size of the background image.
	Image Horizontal Position	allows you to choose the horizontal position of the Background image. You can choose from Left, Center, or Right.
	Image Vertical Position	allows you to choose the vertical position of the Background image. You can choose from Top, Center, or Bottom.
	Image Repeat	gives you the option to repeat the image when it does not fit the container.

BACKGROUND VIDEO

Video URL

allows you to add a video background. Simply paste the URL of the video you want to feature.

NOTEOn mobile devices, video background is not yet supported. You should set the Image background along with the Video background. ShortPoint will load the supported background automatically.

B. Design tab

The Design tab allows you to customize the look of the Background. It has the following options:

SETTINGS

	Layout	allows you to choose the size of the content inside the background. By default, it will be standard. The background image or video size will not be affected here.
	Vertical Alignment	allows you to choose the vertical position of the content. You can choose from Top, Middle, or Bottom.
	Horizontal Alignment	allows you to choose the horizontal position of the content. You can choose from Left, Middle, or Right.

SIZE

	Height	allows you to adjust the Height of the Background.
	Width	allows you to adjust the Width of the Background.
	Force Full Screen Width	Force the background to fit the whole browser width. Page left or right columns will be covered. This will disable horizontal scrolling.
	Force Full Page Width	Force the background to fit the whole page width. Page left or right columns will be covered. This will not affect horizontal scrolling.

BACKGROUND COLOR

	Color	allows you to add a background color. You can do so by [1] typing the HEX code, [2] choosing a color from the drop-down, or [3] picking a color using the color picker.
	Color Transparency	allows you to adjust the transparency of the color you chose.

SPECIAL EFFECTS

	Parallax Effect	allows you to show the background image or video in parallax while scrolling.
	Blur Effect	allows you to add a blur effect on the background image/video.

C. Advanced Tab

The Advanced tab allows you to further customize the design of the Background Design Element. It has the following options:

CUSTOM PADDING

	Padding Top	allows you to adjust the top padding of the Background.
	Padding Right	allows you to adjust the right padding of the Background.
	Padding Left	allows you to adjust the left padding of the Background.
	Padding Bottom	allows you to adjust the bottom padding of the Background.
	Keep custom padding on mobile	when enabled, the padding customization will be applied on mobile.

CUSTOM MARGIN

	Margin Top	allows you to adjust the top margin of the Background.
	Margin Right	allows you to adjust the right margin of the Background.
	Margin Left	allows you to adjust the left margin of the Background.
	Margin Bottom	allows you to adjust the bottom margin of the Background.
	Keep custom margin on mobile	when enabled, the margin customization will be applied on mobile.

D. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and Javascript code to customize the Background Design Element. 

NOTECheck out our support article on How to Insert Custom CSS into a ShortPoint Design Element (Basic Tutorial) to know more about Custom CSS.

NOTEThe Visibility tab is currently unavailable in Live Mode.

Congratulations! You can now effectively use Background images or videos on your SharePoint page.

Related articles:

• How to Customize the Frame Design Element
• How to Customize the YouTube Video Design Element
• How to Customize the Image Carousel Design Element
• How to Customize the Icon Design Element