SharePoint, Full Screen Background for Sites and Pages

Posted: August 20, 2013 in CSS Style Sheets, Customization, SharePoint
Tags: ,

Yesterday we needed to have full screen background on our SharePoint sites and their pages. After lots of searching and testing different approaches, I found the following solution which is based on jQuery, the most suitable one for us. We couldn’t use the CSS 3 techniques since in my opinion using CSS3 in SharePoint 2010 is not recommended and has a lot of side effects. especially for internal use like Intranet and portal which main objectives are collaboration. I have previously published a post here about CSS3 and SharePoint 2010 which usually case some parts like ribbon or etc start function correctly.

I found my solution here but I changed it a little. Instead of using “$(window).load” , I used “$(document).ready” , so it will help that the image to be re-sized much sooner. According to this blog, if you want to hookup your events for certain elements before the window loads, then $(document).ready is the right place.

Here is the summary of my solution:

  • Needed styles to be attached to the master page:

#bg {
position: fixed;
top: 45px; /* image to start after ribbon */
left: 0;
.bgwidth {
width: 100%;
height: 100%;
  • Needed jQuery (Don’t forget to link to a proper jQuery library!):

$(document).ready(function() {

var theWindow = $(window),
    $bg = $("#bg"),
    aspectRatio = $bg.width() / $bg.height();

function resizeBg() {

if ( (theWindow.width() / theWindow.height()) < aspectRatio )

  • Also this tag should be added right after “<div id=”s4-bodyContainer”>” tag in the master page

<img src="../PublishingImages/Background.jpg" id="bg" alt="">

src” is the relative address of the background file for each site. so you can place your background file there.

Good luck ! 🙂


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s