CODEWITHSUNDEEP
htmlcssbackground-image
Zerp
Zerp

Reputation: 892

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

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?

the illustration of the issue at hand

(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)

Upvotes: 1

Views: 674

Answers (1)

Arbel
Arbel

Reputation: 30999

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

Upvotes: 4

Related Questions