SharePoint will break your parallax background

Posted on: March 17, 2018

I have been creating a website at work in SharePoint recently, that had the layout created by an external agency. So they provided the HTML, CSS, and js for a home page and a second level page. This of course makes my job easier for making the website, as a lot of the work has been done. However, good old SharePoint still likes you to spend a decent amount of time fixing things that you really shouldn’t need to. Basically, there is a lot of CSS courtesy of core15.css that will override the custom stuff at certain points. Sometimes this means you then have to make your selector more specific, sometimes it means you have to reset the selector to its initial state, and sometimes it means you have to work out what the user-agent would have applied and actually set a rule for that! A bit of a pain all around. But one thing in particular really had me stumped for a bit.

As you may know, SharePoint does this weird thing of disabling scrolling (i.e. no vertical scroll bar) and then works out the size of the window, resizes its container elements to that size, and then sticks the scroll bar back on. Obviously it does this, why wouldn’t you? Anyway, the layout I was trying to implement had a parallax background using stellar.js. This (of course) broke, as the container it was in was only the height of the window. So how do you fix this? Fortunately it can just be done with CSS. The first thing is to stop that stupid height setting from constantly happening:
#s4-workspace {
height:auto !important;

Then, you will want to make sure you can actually scroll:

body {

and finally, you will probably need to be able to see your background, so add this to that body style too:
background-color: transparent;

After doing that, you should find that your parallax works, you see your background, and you don’t have that stupid resizing of the container elements ruining your life!