how do i control the size of the background image?

Question

I uploaded a background image with the the "Change the look" option in site settings. It's a small image, but now it's being stretched to the entire window. Is there a way i can control how big the image appears with the CSS file or master page?

Answer 1

There's a CSS3 property ('background-size') for sizing background images. SharePoint adds the background image class '.ms-backgroundImage' to the body tag. You can override that CSS.

Ex.

body.ms-backgroundImage {
    background-size: 400px 500px;
    background-position: center center;
}

The JavaScript way of doing it would be to get the background image url from the body tag and then dynamically create Img tag and then position it as fixed. This article describes such techniques. http://css-tricks.com/perfect-full-page-background-image/

Answer 2

The background image is tied to the BODY element on the page. The CSS for this has set the background-size property to "cover". You would need to override that CSS style for the BODY element.

You could create a CSS file with the following contents:

body { background-size: inherit !important; }

And then reference the URL to the CSS file in the Alternate CSS URL section of the master page settings.