CODEWITHSUNDEEP
cssbackground-image
Emphram Stavanger
Emphram Stavanger

Reputation: 4214

Centered background centered to window, not element

I've attached a repeat-y background to my body element, and while everything else works fine, I noticed that when the window width is less than the min-width of the body, the background is in fact centered to the window instead of the body element.

I checked from the element inspector in Chrome (and it's also obvious from the horizontal scrollbar) that the min-width attribute works; the background just isn't centered accordingly.

I'm running the latest consumer Chrome. Is this a browser bug (sure smells to me like it)? How can I circumvent it?

I've made a Fiddle; http://jsfiddle.net/FXyMz/ — Make the Result window's width smaller than 250 pixels and you'll see.

Upvotes: 0

Views: 52

Answers (1)

Faust
Faust

Reputation: 15404

The body element is a special case, and will not work the way you want it to.

"The background of the root element becomes the background of the canvas and its background painting area extends to cover the entire canvas,"
in: http://www.w3.org/TR/css3-background/#special-backgrounds

Your best bet is probably to place another layer within the body to behave the way you're expecting the body to behave.

This: http://jsfiddle.net/7mVNL/1/ is a partial solution. You'll see that the wrapper doesn't paint all the way down to the bottom of the viewport as I expect you would desire.

Upvotes: 1

Related Questions