Home/ Questions/Q 7925911
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T18:30:01+00:00

I’ve attached a repeat-y background to my body element, and while everything else works

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0