I am trying to create a background image that is placed behind a specific title image. I want the background image to stay with that title image so that when I scroll down the page, it stays fixed with the title image and it eventually cannot be seen.

I have tried several different variations of the script below, but the background image always ends up scrolling with the page thus making it just float on the page without any specific purpose.

This script below has worked on JSFiddle, but I have had no luck with it in SharePoint 2013.

body.ms-backgroundImage {
background: url(../LandingPage/LAIPic1.png) top left no-repeat;
background-position: fixed;

2 Answers 2


Try as below

body.ms-backgroundImage {
    position: absolute;
    height: 200px;
    width: 30px;
    background-repeat: none;
    top: 100px;
    left: 0;
    z-index: 6;     

Change top left height and width

  • Same result. Any other ideas?
    – John
    Dec 9, 2014 at 14:19

Try this:

body, .ms-backgroundImage {
    background: url("../LandingPage/LAIPic1.png") no-repeat fixed center center / cover  transparent;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.