I have a .jpeg image that I want as my background image for my SharePoint site. When I go to Change the Look I drop the image in, but it appears grainy/blurry and not clear when I save it to my site.

Here are the specs on the image I am using: 1024 X 683 pixels Horizontal resolution 72dpi Vertical resolution 72dpi

I have tried re-sizing the image to smaller, but get the same results.


2 Answers 2


SPO employs a semi-transparent overlay on your background to make content more visible.

You can increase the visibility of your background by reducing the alpha value using css. The overlay class is ms-core-overlay.

Try embedding the following code in using script or content editor

<style> .ms-core-overlay { background-color:rgba( 255,255,255,0.60); </style> }

This reduces the overlay from 85% (it's default value) to 60%.


Please try with this JavaScript which will find the img tags inside the default SharePoint tags, will help you to change the S Thumb images to L Thumb or M Thumb images.

Map this JavaScript to master page.

    $('.ms-profilepicture img').each(function () { 
        $(this).attr('src', $(this).attr('src').replace('SThumb.jpg', 'LThumb.jpg')); 

     $('.ms-peopleux-userImgDiv img').each(function () { 
         $(this).attr('src', $(this).attr('src').replace('SThumb.jpg', 'LThumb.jpg')); 

Hope it works for you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.