Topic: background-position changed in FF1.5

I have something to say, maybe a question, let's type and see what it's about...

I just upgraded Firefox from 1.0.1 or somewhere thereabouts to 1.5 and noticed something odd in it's rendering of a page with the body background:

body {
	background : white url('bg.gif') no-repeat center center;
	}

The background image is no longer centered in the viewport horizontally and vertically. I use this for a lot of domains with simple cover pages on them and went looking around and they were all jacked up in the new 1.5. They were centered horizontally but vertically the image was at the top of the viewport with only the lower half of the image visible. Even stranger I almost immediately found a "fix"

body {
	background : white url('bg.gif') no-repeat [b]fixed[/b] center;
	}

Can anyone tell me if this is to be considered a rendering bug? As far as I've know and continue to know after researching a litte "center center" is perfectly valid and should render the way previous way so I think this is a bug...

I've always used the background-position before the background-repeat in the condensed background properties, and at first I thought this might be the culprit. Evidently not.

Anyhow, I remembered vaguely about an Owen Briggs article on background centering problems, so I found it again. Looks like Firefox 1.5 is exhibiting almost the exact same behaviour as Opera 5.2.

http://www.thenoodleincident.com/tutorials/box_lesson/opera/index.html

His solution? To use:

background-attachment: fixed;
background-position: center;

I think that's actually what your code is doing, though whether you realized this I don't know... I forgot altogether about the background-attachment property.

Anyhow, nice catch. It should probably be reported as a bug if it isn't already. In the interim, you solution works, as does the other code at thenoodleincident.com. Keep in mind that if the page breaks the bottom of the window, your background will now (as I don't believe it does with background-position: center center) stay fixed to the window and scroll with the page.

Cheers,
DC

Check to see if you have html & body set to min-height or height 100%.

after posting this last night I looked around and saw the problem pop up here and there, the height 100% was the other fix I saw, I liked mine a little better as it kept all the fixes on the same line and didn't jack with anything else at all

BUG then!

Couple of sidenotes -

The html {height:100%;} is an issue that relates to how gecko browsers interpret the document. It is not a given that the HTML element is 100% height, and that needs to be set for various other issues. So if making sure that is set fixes the background issue, it seems better to me to leave it at that and forget about the position:fixed.

FWIW

what are the various other issues? I knock out a lotta layouts and rarely find need for it, plus I thought it caused me scrollbar grief once which put me off a bit...

I'm so crappy at remembering what's what with hacks, I remember table hacks and spacer gifs taking a long time to kick in for me too. I take great comfort in the fact that reiso, whom I consider extremely knowledgeable and helpful with the css crap, most often says "I don't know, IE is stupid". That's about how I approach a new layout bug, sling hacks at it until it works. I'd very much rather I remembered which to use immediately... and why...

Well, my answer was relatively off-base. Thanks for the heads up.

Cheers,
DC

JK - mainly that if you want anything to actually behave with a height of 100%, the HTML and the BODY elements need to have that specified. Otherwise, 100% means 100% of the content filled area, not 100% of the viewport.

A lot of my layouts make use of 100% height elements, so I pretty much automatically throw that in at this point.

And I wouldn't call this a hack - it's simply the way that gecko browsers work with height - you have to specify it for the HTML and BODY elements.

Now spacer gifs
Even at the worst of times I never resorted to that!



(Edited by DL-44 on 01-12-2006 22:15)

quote:

---

DL-44 said:

Even at the worst of times I never resorted to that!

---

quote:

---

DL-44 said:
Now spacer gifs
Even at the worst of times I never resorted to that!

---

Me neither (that I recall, a little planning usually made that sorta thing unneccessary), I liked to used a proper cut up piece of eyecandy but in the end I call a graphic holding a table cell open a spacer gif by default anymore

all browsers suck. still. always?

This is an improvement, actually. Before 1.5 technically Gecko was not keeping to spec. It may have been simpler, but it's a small price to pay for standards conformity.

Opera has done it this way for a while (hurts to say something nice about Opera).

(Edited by reisio on 01-13-2006 02:24)

it's more nit picky and precise anyhow, and that's what it's all uh bout I guess