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; }
I have a master page built and the GUI background change util hits size and type limitations. (say I want a video background or a higher res image as it’s all LAN traffic, and overpowered the size isn’t a worry.)
As a systems vet but a sharepoint novice, I’m completely lost with the navigation scheme in sharepoint.
Using sharepoint 2016 there’s about 20 million .css files, some pointing to directories that don’t get used, and others to directories that don’t even exist in the file structure..
What .css file from what directory do you edit to have this roll through the site, and does it bypass file size/type limitations?
what you would want to do is attach your own custom CSS file. you can host that anywhere within your site. using this would bypass any size b/c it’s a background image that overrides the default values. you could also do custom css to make background image or anything else.