Positioning a background image in an element with an offset from the bottom

Question

Is there a way to set a background to be fixed to the center, and to the bottom, but not flush with the bottom of the element, rather 100px up from the bottom of the element?

(Of course the bg image would only be visible with in the div bounds)

This is what i have so far, but don't know how to bump the image up 100px from the bottom.

background: url("/path/to/bg.jpg") no-repeat fixed center bottom #FFF;

(no javascript answers please)

Answer 1

Very simple:

background-color: #fff;
background-image: url("/path/to/bg.jpg");
background-repeat: no-repeat;
background-position: center bottom 100px; /* answer */

Ref: http://www.w3.org/TR/css3-background/#the-background-position

More to read: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position