Posts Tagged ‘Full Screen Background Image’

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;
z-index:-9999
}
.bgwidth {
width: 100%;
}
.bgheight{
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 )
   {
    $bg
    .removeClass()
    .addClass('bgheight');
   }
   else
   {
    $bg
    .removeClass()
    .addClass('bgwidth');
   }
}
theWindow.resize(resizeBg).trigger("resize");
});

  • 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 ! 🙂

Advertisements