'%3e%3cpath%20d='M8%200C12.4183%200%2016%203.58172%2016%208C16%2012.4183%2012.4183%2016%208%2016C3.58172%2016%200%2012.4183%200%208C0%203.58172%203.58172%200%208%200ZM11.6162%204.38379C11.2257%203.99337%2010.5927%203.99338%2010.2021%204.38379L8%206.58594L5.79785%204.38379C5.40732%203.99334%204.77429%203.99329%204.38379%204.38379C3.99331%204.77429%203.99335%205.40733%204.38379%205.79785L6.58594%208L4.38379%2010.2021C3.99348%2010.5927%203.99341%2011.2257%204.38379%2011.6162C4.77426%2012.0066%205.40734%2012.0065%205.79785%2011.6162L8%209.41406L10.2021%2011.6162C10.5927%2012.0066%2011.2257%2012.0067%2011.6162%2011.6162C12.0067%2011.2257%2012.0066%2010.5927%2011.6162%2010.2021L9.41406%208L11.6162%205.79785C12.0066%205.40735%2012.0066%204.77429%2011.6162%204.38379Z'%20fill='%23080E17'%20fill-opacity='0.46'/%3e%3c/g%3e%3cdefs%3e%3cclipPath%20id='clip0_3761_713'%3e%3crect%20width='16'%20height='16'%20fill='white'/%3e%3c/clipPath%3e%3c/defs%3e%3c/svg%3e)
How to Add Images and Custom HTML or CSS to SharePoint
Question details
The user needs to know how to add images and apply custom HTML, CSS, or JavaScript to customize a modern SharePoint site.
- Product
- SharePoint
- Device & OS
- not provided
- Scenario
- Customizing site layout, branding, and page content within a modern SharePoint environment.
- Observed behavior
- Modern SharePoint natively supports adding images and text via built-in web parts but restricts unrestricted HTML and CSS editing to maintain security.
Ensure you have the necessary edit permissions for your SharePoint site. If you plan to use custom scripts or HTML, verify with your SharePoint administrator that custom scripting is enabled for your specific site.
Use Built-in Web Parts for Images and Formatted Text
Modern SharePoint prioritizes security and responsiveness, recommending built-in web parts for adding images and formatted text without needing code.
This is the safest and most reliable method for updating your site content. Using native web parts ensures your page remains mobile-responsive and secure from code vulnerabilities.
Navigate to your modern SharePoint page and click the Edit button located at the top right corner of the screen.
Hover your mouse over the page canvas, click the + icon to add a new web part, and select Image. You can then upload a new picture or link to an existing one.
To add formatted content, click the + icon again and select the Text web part. Use the rich text editor toolbar to format your text without writing HTML.
To change the site logo or header background, click the gear icon (Settings) in the top navigation bar, select Change the look, and click Header to upload your branding images.
Insert Custom Code Using a Script Editor Web Part
If advanced customization is mandatory, you can use an approved modern Script Editor web part, provided custom scripting is allowed on your tenant.
Create and Design Document Assets Offline with WPS Office
While SharePoint restricts custom HTML formatting, you can easily draft, format, and design your documents, images, and text layouts locally using WPS Office before uploading them to your team sites. It is highly compatible with Microsoft formats, lightweight, and completely free.
- 1. Draft content in WPS Writer: Open WPS Writer to draft your rich text, insert images, and design your page layout locally without needing HTML or CSS.
- 2. Save as standard formats: Save your finalized design as a highly compatible .docx or .pdf file.
- 3. Upload to SharePoint: Upload the saved document directly to your SharePoint Document Library to share formatted information securely.
Frequently Asked Questions
Why can't I embed HTML directly into the SharePoint Text web part?
Modern SharePoint restricts direct HTML and CSS code injection in the native Text web part to protect sites from cross-site scripting (XSS) and other code-based security vulnerabilities.
How do I change the SharePoint site logo?
You can change the site logo by navigating to your SharePoint site, clicking the Settings gear icon, selecting 'Change the look', then clicking 'Header' to upload a new logo image.
What is the modern Script Editor web part?
The modern Script Editor is a custom SharePoint Framework (SPFx) web part that administrators can deploy to allow users to inject custom HTML, CSS, and JavaScript into modern pages, similar to how it worked in classic SharePoint.
Why is my Script Editor web part not saving my code?
Your SharePoint administrator may have disabled custom scripting at the tenant or site level. Custom scripting must be explicitly enabled via the SharePoint Admin Center or PowerShell for script editors to function properly.
