Based on Center images (+ background). In addition:
- uses different background colours while mouse over body / the image
- image used for the background grid (chequerboard) is white and transparent, so you can change secondary (now: grey) colour to match your needs
Notes:
- "body area" is just as tall as image (+paddings), not as viewport
- used gif instead of png because of the size
- example image used (good for testing): http://www.mozilla.org/foundation/identity-guidelines/firefox-128.png ( broken, try http://www.mozilla.com/img/tignish/about/logo/download/logo-only.png )
- From: http://www.mozilla.org/foundation/identity-guidelines/firefox.html
- for U.S. web-crawlers: checkerboard!
- other variants, see the "webring" :] :
http://userstyles.org/styles/search/Center%20images?category=global
- flow:
-- Center images
-- Center images (+ background)
-- Center images (+ dynamic background) (you are here)
-- Image:Cutout
-- Firefox View Image Page - Checkerboard
Change log:
2007-11-27 : fixed 1px left position difference between cold and hover state of images larger than viewport.
2007-12-07 : added background grid also for hovered images in "normal" pages
2008-01-07 : ^ removed. Reason: messy in some pages (eg google maps), and, in fact, this functionality has nothing to do with the title of this userstyle. Functionality moved into an extra userstyle: Show transparency of in-page images on hover
2008-01-09 : source simplification and clean-up (two state solid outline instead of dotted border; but I am not sure if it is useful here at all.) Slightly increased the contrast of the grid.
2008-01-14 : screen-shot updated.
2008-06-05 : several fixes: border to outline, removed resetting of body margin and padding (so large picture will not fill the entire viewport, but also will prevent nasty flickering while hovering scroll bar in some cases)
2008-08-29 : code clean-up
2008-10-01 : note: ghjk: it seems some userscript or extension is altering your "view-image" page by adding some content 'somewhere'; try to look at the generated source of such page (anything except HTML,BODY and IMG is 'wrong') and/or replace each "body:only-child" by "body:first-child" in your installation of this CSS. Oh, this makes me see that this user style cannot work as user script.
Install options
- Install Stylish for Firefox, Thunderbird, Flock, Mozilla Suite, SeaMonkey, or Songbird. If you have Stylish already, make sure you're using the latest version and have JavaScript enabled.
- You need Firefox with Stylish to use this style. Get it now, then Install Stylish, then come back here to install this style.
- - load into the Stylish extension where you can preview and save it.
- - this style has been updated since you installed it in Stylish.
- - Greasemonkey and Opera users can load this style as a user script.
Feedback
Reviews
ghjk said on Sep 27 2008
it's broke in ff3.0.3 . it center's as it's downloading but once downloaded it shifts left even the chequered background is gone
rude-dude said on Aug 26 2008
good, this is better:
@namespace url(http://www.w3.org/1999/xhtml);html >body:only-child{}html >body:only-child{ background-color:#ddd; background-image:url(data:image/gif;base64,R0lGODlhCgAKAIAAAAAAAP///yH5BAEAAAAALAAAAAAKAAoAAAIRhB2ZhxoM3GMSykqd1VltzxQAOw==)}html >body:only-child >img:only-child{ display:block; margin:0px auto}html >body:only-child:hover >img:only-child{ background-color:#fff; outline:1px solid #000}html >body:only-child:hover >img:only-child:hover{ background-color:#000; outline:1px solid #fff; background-image:none}
deadman36g said on Aug 17 2008
This styles works nice, except when I use a gesture with FireGesture, is there a way to fix this?
ddsafsdfgs said on Mar 22 2008
Great... Works with FF3 Beta 4 (I use Portable)
whatrevolution said on Jan 13 2008
\o_o/