How To Add Background Image In Sharepoint Page

Are you looking to enhance your SharePoint page with a visually appealing background image? Follow our comprehensive guide to learn how to add a background image in SharePoint page.

To add a background image in a SharePoint page, there are a few options available. The built-in webparts and page sections do not support background images. However, there are workarounds that can be implemented.

One option is to use an image web part with text overlay, if the amount of text is not too much. Another option is to use the Call to Action web part, which allows for a background image but requires a hyperlink. Additionally, you can create an image with text included and use it as a section separator or for visual communication.

For SharePoint online modern experience site pages, all the mentioned features should work once they are released to your SharePoint tenant.

Another method involves using CSS code and linking a CSS file from the site assets to a content editor web part. This method allows for linking a background image to a specific site page without modifying the masterpage or changing the background image for the entire site collection.

Video backgrounds can also be used in SharePoint pages by customizing the page with the modern PnP Script Editor web part. The video should be uploaded to a SharePoint document library, and the video URL should be copied. The page can then be edited and the script editor added to the top of the page. A code snippet is provided to insert the video as a background on the title region.

These methods provide ways to add background images and videos to SharePoint pages, enhancing the user experience and providing a more immersive and interactive environment.

Options for Adding Background Images in SharePoint Page

There are several options you can explore to add a background image in your SharePoint page. Let’s take a closer look at these options and how they can enhance your page’s visual appeal.

One option is to use the image web part with text overlay. This option is suitable if you have a small amount of text to display. The image web part allows you to insert an image and overlay text on top of it, creating an eye-catching visual element for your page.

Another option is the Call to Action web part. This web part allows you to add a background image to your page, but it requires a hyperlink to be associated with it. The Call to Action web part is a great choice if you want to create visually appealing sections on your page that encourage users to take action.

If you’re looking to separate different sections on your page or convey visual communication, you can create an image with text included. This image can be used as a section separator or as a means to communicate key information to your audience.

These options provide flexibility in customizing your SharePoint page with background images. Whether you want to add visual interest, create engaging sections, or communicate important information, these options can help elevate the overall user experience of your SharePoint site.

Table: Overview of Options for Adding Background Images in SharePoint Page

Option Description
Image web part with text overlay Allows you to add an image with overlaid text to your page
Call to Action web part Enables you to add a background image with associated hyperlink
Image with text included Use an image as a section separator or for visual communication

By utilizing these options, you can easily incorporate background images into your SharePoint pages, giving them a visually appealing touch and creating an engaging user experience.

Advanced Methods for Adding Background Images in SharePoint Page

Ready to take your SharePoint page customization to the next level? Discover advanced methods for adding background images, such as using CSS code and a content editor web part, as well as incorporating captivating video backgrounds with the PnP Script Editor web part.

One method involves using CSS code to link a CSS file from the site assets to a content editor web part. This allows for the background image to be linked to a specific site page without modifying the masterpage or changing the background image for the entire site collection.

To add video backgrounds in SharePoint pages, you can customize the page using the modern PnP Script Editor web part. Simply upload the video to a SharePoint document library and copy the video URL. Edit the page, add the script editor to the top, and insert the provided code snippet to set the video as a background on the title region.

Implementing these advanced methods not only adds visual appeal but also enhances the user experience by creating a more immersive and interactive environment. With background images and videos, your SharePoint pages will leave a lasting impact on users and make your content more engaging.

Meet the Author

Abdul Rahim has been working in Information Technology for over two decades. Learn how Abdul got his start as a Tech Blogger , and why he decided to start this Software blog. If you want to send Abdul a quick message, then visit his contact page here.