2

I've created a custom HTML and CSS file, uploaded it to SP2013 using design manager, and converted the HTML to a .masterpage. I want to set a full page background image, so I've added the following to the body {, but the image is not appearing.

If I just add <img src="dt_images/bg.jpg" /> to the master HTML page, the image appears.

But if I reference the image as such in the CSS, it does not:

body { 
    /*background: Gainsboro;*/
    background: url(../dt_images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Why is this?

Edit:

CSS Path:

background: url(../dt_images/bg.jpg) no-repeat center center fixed;

file structure:

enter image description here

Improve this question

2 Answers 2

Reset to default
2

Are you sure the image path is correct relative to the CSS file? The CSS looks ok - check the console or fiddler to see if the image is coming through.

Edit: also, try adding #s4-workspace {background:transparent;} to make sure you're not getting a V4 background color that's sitting on top of yours.

Improve this answer
2
  • Yeah, my file path has been added above. Don't know what's going on.
    – user3871
    Jan 15, 2014 at 20:18
  • Also, the image appears when I run the HTML page locally, but not in SharePoint with the path: background: url(../dt_images/bg.jpg) no-repeat center center fixed;
    – user3871
    Jan 15, 2014 at 20:27
2

SharePoint 2013 uses a combination of JavaScript and CSS to set a background on the body. But instead of applying it directly to the HTML <body> tag, JavaScript is used to add the CSS class .ms-backgroundImage and then apply a background-image via CSS.

So, the proper way to set the background image for a JavaScript enabled Web browser is:

body.ms-backgroundImage
{
  background: url(../dt_images/bg.jpg) no-repeat center center fixed; 
}
Improve this answer

Your Answer

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

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