Sticky Footer Vs. Background Center

[matthaltom]

Hey Everyone.
I was checking out the "sticky footer" stuff today and came across a unique instance that makes a little problem. I’ve used the sticky footer before and usually works great. In this case I create a design that requires me to use several background graphics for the main layout. One for the body and 2 different ones for the header. One header graphic repeats-x and the other is centered at the top. The display:table; makes it so when the browser is scaled smaller then the "main container" it hold its position, rather then centering in the browser and moving.

Here is the html/body CSS

Code:

html, body{
color: black;
font-family:”Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, Verdana, Arial, sans-serif;
width: 100%;
display: table; /*<--- this causes the Sticky Footer not to work, but centers body backgrounds with content*/ height: 100%; background: #d8e2e6 url(images/bodybg.jpg) repeat-y center; }

This is the header graphic that is centered

Code:

#header{height: 250px;margin:0px auto 0px auto; padding: 0px; text-align:left;
background: url(images/headerbg.jpg) no-repeat fixed center top;}

Has anyone ever experienced this before? Is there maybe a different fix for keeping the background image centered? Can post an example later when this site design goes live.

[von]

I think Chris dealt with this once on the script&style page.

http://scriptandstyle.com/centering-a-body-background-image-that-behaves

A ways down in the comments there are these two jewels of information from LPent:

Quote:

The reason this works is exactly how it is described in the CSS color spec:

For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element. For HTML documents whose root HTML element has computed values of ‘transparent’ for ‘background-color’ and ‘none’ for ‘background-image’, user agents must instead use the computed value of those properties from that HTML element’s first BODY element child when painting backgrounds for the canvas, and must not paint a background for that BODY element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element. This does not apply to XHTML documents.

and

Quote:

Perhaps I should clarify my comment above a bit more, the spec can be hard to read.

What it says is that when you do not declare a background property on HTML, anything you declare on BODY will be rendered on HTML. Once you declare something on HTML as well, anything declared on BODY will be rendered on BODY.

So it is not a bug, it is standards behaviour.

Hope this clears it up?

[Author]

Posts