In this article we will show you how to prevent images cropping on ShortPoint Tiles Design Element.

Before:

After:

TABLE OF CONTENTS

• This article is for you if
• Prerequisite
• Step 1: Open the ShortPoint Tiles' settings
• Step 2: Copy the custom CSS code
• Step 3: Update Tiles with code
• Result

This article is for you if:

• You have ShortPoint installed on your SharePoint sites.
• You are a ShortPoint user with an active license.
• You use SharePoint 2016 or SharePoint 2013 On-Premise environment.

Notes:
1. If you use SharePoint 2019 or Office 365 environment, please check our solution article on How to Use Image Settings to Manage Image Cropping in ShortPoint Elements.
2. Image Cropping functionality is coming soon for SharePoint 2016 and SharePoint 2013. 

Prerequisite

You use ShortPoint Tiles Design Element with images as tile items' background.

Step 1: Open the ShortPoint Tiles' settings

Edit your page.

Click the cogwheel icon to open the settings of the Tiles Design Element.

The Settings tab will appear.

Step 2: Copy the custom CSS code

Here is the custom CSS code you will need to use for preventing images cropping on Tiles:

.shortpoint-tile-bg-image {
   background-size: contain;
   background-repeat: no-repeat;
   background-position: 50% 50%;
}

Step 3: Update Tiles with code

Switch to the Custom CSS tab:

Paste the copied code to the Custom CSS field:

You may check how it will look like on your page by clicking the Preview button:   

Then, click Update and save the page.  

Result

That's it. This is how it may look like on your page: 

Related articles:

• How to Make Circular ShortPoint Tiles
• How to Make Rounded Corners for ShortPoint Tiles
• How to Change Grey Text Background in ShortPoint Tiles