Applying background image to SharePoint Subsite, added to SharePoint Popups

sharepoint.stackexchange https://sharepoint.stackexchange.com/questions/247533

Question

I'm trying to inject some css to the body of my SharePoint webpage for a background image. The .js is essentially this:

document.body.style.backgroundImage = <My Image URL>
document.body.style.backgroundSize = "50%"
document.body.style.backgroundPosition = "50% 50%"

And it works as I expect, unless there's an iFrame in the middle (or any other 'body' tag). Then the image gets put inside the iFrame as well as the body of my page. The iFrames are things like 'Add a Document' or adding events to calendars that don't redirect the page. They're not up all the time but I don't want the image there, regardless.

All of the body tags have the same generic setup ( <body class="ms-backgroundImage" style="..." spellcheck="false"> ) regardless of if they're the site's actual Body tag or if it's the iFrame's body. The only difference is the iFrames have a tabindex attribute. I've tried to add if(!document.body.hasAttribute('tabindex')){...} but it doesn't work. Still adds to both the iFrame and main document's body.

Is there a way with Javascript to say "Apply to the main body, but not to any others"?

EDIT: Showing the image of it not working properly...

EDIT 2: Updating the question to better reflect the situation. Showing on

Was it helpful?

Solution

I have tried the below script that working properly and didn't effect on the Upload Document IFrame background or others!

<script>
document.body.style.backgroundImage = 'url("http://ImageURL")';
</script>

Output

enter image description here

Instead of modifiying Master Page with custom code to change the background to all pages within the site! try to set the background image in the Look and Feel setting as the following.

  • Site Settings > Look and Feel > Change the look.

  • Click on the current them, then click on change to select your background image from your PC that will be uploaded to the Site Assets.

    enter image description here

Licensed under: CC-BY-SA with attribution
Not affiliated with sharepoint.stackexchange
scroll top