0

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 'Add a Document'

Improve this question
2
  • can you also add document.body.classList.add("isDlg"); and check ?
    – Gautam Sheth
    Aug 22, 2018 at 14:07
  • @GautamSheth Same result after adding document.body.classList.add("isDlg"); to the referenced js sheet
    – KGlasier
    Aug 22, 2018 at 14:15

1 Answer 1

Reset to default
1

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

Improve this answer
4
  • I added an image of my output... Did you put the script in the master page or just the local page?
    – KGlasier
    Aug 22, 2018 at 14:00
  • 1
    In local page, if you need to apply it for all pages, I don't think you will need to edit the master page just change it from Look and Feel settings!!
    – Mohamed El-Qassas MVP ♦
    Aug 22, 2018 at 15:25
  • How do I go about doing that? If I just want essentially a watermarked image in the background of all pages on the subsite?
    – KGlasier
    Aug 22, 2018 at 15:54
  • Welcome, Glad to hear it matched your requirement :)
    – Mohamed El-Qassas MVP ♦
    Aug 22, 2018 at 16:44

Your Answer

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

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