Search code examples
cssimagesharepointsharepoint-2013sharepoint-designer

Custom Background Image for only one SharePoint 2013 Site Page not the whole site collection


Scenario:

  • Client would like only one site page to have its own background image in their SharePoint 2013 environment.

Issue:

  • I have done my research and have found a couple examples on how to link css files from the site assets to a content editor webpart, which according to others should render the image onto the background of the site page. When I try this method it returns nothing.
  • Furthermore I have tried to insert similar code onto a script editor refrencing the content editor's webpart ID with no luck either.

Question: I would like to accomplish this task without editing the masterpage and without changing the background image for the rest of the site collection. Has anyone ever done something like this before? Most of my research was hit and miss on who has actually succeded and who has not. I have included my code below.

<style type="text/css">
BODY
{
                background-image:url("/SiteAssets/191208-M-AB981-1006.JPG") !important;
                background-repeat:no-repeat;
                BACKGROUND-COLOR: transparent !important;
}

.s4-ca {
BACKGROUND-COLOR: transparent !important;
}
.ms-alternating,.ms-gb,.ms-alternatingstrong {
  background-color: transparent !important;
}
.ms-WPHeader {
  background-color: transparent !important;
}


</style>

Solution

  • You could try to use the full picture url in CSS code to check whether the url is correct. Here is my test result.

    test result

    <style>
    body{
    background-image: url("http://sp:6912/testPictureLib/dowffnload.jpg")!important;
    }
    
    </style>