CSS and SP Designer to create fixed background image

Question

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;
}

Answer 1

Try as below

body.ms-backgroundImage {
    position: absolute;
    background-image:url('../images/panelbar.png');
    height: 200px;
    width: 30px;
    background-repeat: none;
    top: 100px;
    left: 0;
    z-index: 6;     
}

Change top left height and width

Answer 2

Try this:

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