Quickie - how does my footer display on your setup?

beardedgit

Recently I've been playing with background images, and with element transparency using CSS in homepage and folders only. When I look at my homepage and folders I see the background image behind the footer text, as I want it, but I've checked my site (http://beardedgit.smugmug.com/) on http://www.browserstack.com/screenshots and that is reporting that in some OS/browser combos the footer background shows as grey, almost as if the background image hasn't stretched all the way down.

The settings for the background image are size = original (1200x838), scale = fill, repeat = none, position = center center, scroll = fixed, so the image should reach the bottom regardless of monitor size/res. These settings were made in Edit Theme.

I'm confident that the footer area displays OK in XP/Firefox but I'd appreciate some feedback from folk using other browsers please, so that I can troubleshoot this issue.

Andy

All I see is grey background color, no bg image. What should it look like?

thenickdude

Andy wrote: »

All I see is grey background color, no bg image. What should it look like?

Andy, this is what it renders like for me, on Chrome on Mac:

http://i.imgur.com/hX03vls.jpg

beardedgit, the specific code used to make the background fill the page (background-size: cover) is not supported in IE8 and older, is that what you're testing? These browsers are basically ancient history now.

The other issue that you might run into is that RGBA() for transparent colours isn't supported in IE8 or older, though there is an easy workaround for this for background-colors.

beardedgit

Andy wrote: »

All I see is grey background color, no bg image. What should it look like?

Here's what I see on my XP/FF/1280x800 setup in fullscreen:

beardedgit

Lamah wrote: »

beardedgit, the specific code used to make the background fill the page (background-size: cover) is not supported in IE8 and older, is that what you're testing? These browsers are basically ancient history now.

The other issue that you might run into is that RGBA() for transparent colours isn't supported in IE8 or older, though there is an easy workaround for this for background-colors.

Oddly, browserstack reported issues with Firefox. Here's a link to the results: http://www.browserstack.com/screenshots/85f5a4b659e9cf2642938bd47a624e2a451f8d11

beardedgit

Lamah wrote: »

Andy, this is what it renders like for me, on Chrome on Mac:

http://i.imgur.com/hX03vls.jpg

Thanks for that screenshot.

thenickdude

I think that browsershots result is more likely to be due to the way they've captured screenshots, than an actual browser problem. A lot of browser screenshot tools do not deal with "fixed" backgrounds properly, since they capture the window using several screenshots, "scrolling" in between.

If I install Firefox 23 on Windows 7 (the version that BrowserShots shows with a grey background for the footer), I get:

http://i.imgur.com/ALNbRfv.jpg

beardedgit

Lamah wrote: »

I think that browsershots result is more likely to be due to the way they've captured screenshots, than an actual browser problem. A lot of browser screenshot tools do not deal with "fixed" backgrounds properly, since they capture the window using several screenshots, "scrolling" in between.

If I install Firefox 23 on Windows 7 (the version that BrowserShots shows with a grey background for the footer), I get:

http://i.imgur.com/ALNbRfv.jpg

Thanks for that, I'll look for a better online browser compatibility checker

thenickdude

No online checkers can solve this problem, since they emulate a browser window of a fixed height. If you want to capture the entire webpage, you have to scroll to see it all, and combine the screenshots together, which obviously doesn't work when the background is set to "fixed".

If you want to test your site in many browsers, a good starting point is probably the downloadable VM version at http://www.modern.ie/en-US/virtualization-tools, which I suspect you can install Firefox etc into.