Hijack SharePoint’s Built-in Full Width Background Image

You may or may not already know that SharePoint has the ability to do full width background images. If you’ve ever applied one of those wacky composed looks then you would see that some of them have full width background images included. You can even apply your own through customizing a composed look. What I’m about to demonstrate is completely different from that. In the follow article I will demonstrate how you can hijack the same exact mechanism that SharePoint is already using to make your background image full width. There is no need for full width CSS or JavaScript tricks to make the image go full width, however we do need to include some CSS so that we can inject our image in it’s place.

If you’ve ever inspected the full width background image from a composed look then you will notice that there is a class on thetag called ‘ms-backgroundImage’ with some css applied to that using the background-image property set to nothing. We are going to take that over.

All you need to do is add some CSS and you can apply this via ‘Alternative Style Sheet’ or if you have a custom CSS file then make your edit there. If not just do an internet search for applying an alternative style sheet and I’m sure you’ll find 100’s of results.

.ms-backgroundImage {
    background-image: url('[REPLACE THIS WITH THE URL TO THE FILE]');
}

If you wanted to do it via JavaScript you could do something like this.

That’s essentially it. No fussing with any additional CSS or JavaScript based plugins.

**Note: I noticed that the image sometimes popped through on my dialog boxes. To eliminate that you could apply this line of CSS. I’m using important so that it’s gone and has no chance of showing itself in that dialog box. **

.ms-dialog body { background-image: none !important; }