opera background image "bug"
I don't remember who said it, but someone once pointed out that if you solve a tricky problem... blog it. You'll help out the next sucker who is trying to solve it.
Recently I ran into a background image positioning bug in Opera 7/8. Well, ok, I thought it was a bug; but actually it was user error. Basically, I had a background image positioned center center. In everything except Opera, it was sitting - as expected - bang in the center of the page.
In Opera, the image was sliding up off the top of the browser canvas. I eventually figured out that Opera was positioning the image according to the length of the content, not the visible canvas area. Throw in some really long content and you'll find the image way down in the middle.
The problem was I'd forgotten to set the background-attachment, despite the fact that I did want it to be fixed. Since I hadn't specified what I wanted, Opera defaulted to the vertical centre of the element. Which, when you think it through, is the right thing to do - I'd said it should be in the middle of the element and the element was as long as the content. The other browsers use for 'we think you wanted...' approach and default to the length of the viewport.
So I explicitly set the background attachment:
background-image: url("img/watermark.gif");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
...and all is well.
In my defence, half the office had a look at the problem and they didn't spot it either :) The moral of the story: beware of default settings and the lazy habits they breed. It will catch you out eventually. In this case, the overly-forgiving defaults of IE and Firefox had let me slip into the bad habit of expecting a background setting that I hadn't actually specified.
Labels: opera
Thank you for blogging it! Not even a week later, you have save me from spending another couple of hours trying to fix the Opera background image wierdness from using center and middle and the like. I *never* would have thought of that.
same problem here. thanks very much for solving it...i was kinda puzzled.
Thanks, *again*, for blogging this. I don't remember when I posted last, but in the meantime I forgot the fix and googled to your post *again*. It's times like this I think I should blog this stuff for myself :) Thanks again.
this saved me loads of time, thanks! and at the same time - so obvious!
Yeah,
I am joining to happy-clasping-and-grinning horde of (l)users trying to make Opera display that goddamned bg :))
Thanks!
G.
Thank you so much for saving me hours and hours of trouble! I love the blog world!
Thanks, this helped me solve a similar bg image problem in opera. And btw, you came up first in google when I searched for "opera background images".
I've got a weird opera bug on this site:
http://www.littledonkey.net/blaq/
It's weird as all the other headings are rendered correctly and the html is the same for the ones that are buggy.
Anyone got any ideas?
@adam: There's a lot going on there, plus you have some validation errors. I'd sort those out first just in case that solves it.
Then look for any contextual CSS that's only being applied/not applied to the problem headings. I'd be on the lookout for width and positioning issues, potentially something similar to the disappearing content bug.
If your initial installation didn't have the problem I'd also suggest commenting out things you've added to see if any of them triggered the problem. You could also try asking around in some Joomla forums (or the My.Opera forums) - if it's a problem with a Joomla theme, someone might have solved it already.
Hope that helps :)
Thanks for the response.
The weird thing is that this renders fine in IE6/7 and firefox and most of the headers even in Opera are rendered fine. It's just those two for some reason.
Weird!
Post a Comment
Got something to say? Leave a comment! If you don't have a Blogger or OpenID account, please use the Name/URL option.