Center images (+ dynamic background)

Added by myf@userstyles, Created: Nov 15, 2007, Updated: Jan 23, 2009
  • With the style applied
  • With the style applied (Generated screenshot)
  • Without the style applied (Generated screenshot)

Description:

Works in Fx3*; for Fx4 (or Chrome, Opera…) use http://freestyler.ws/style/42947/firefox-4-center-images-dynamic-background.

Based on http://freestyler.ws/style/3355/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

More info
Notes:
- tested on Fx2* - Fx3.0.7. If it misbehaves, it is probably some interference with other scripts / styles / extensons / themes. It's said it is broken in Fx3.1
- "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.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" :] :
Center images?category=global<br>- flow:
-- http://freestyler.ws/style/133/center-images
-- http://freestyler.ws/style/3355/center-images-background
-- http://freestyler.ws/style/3447/center-images-dynamic-background (you are here)
-- http://freestyler.ws/style/7254/image-cutout
-- http://freestyler.ws/style/7579/firefox-view-image-page-checkerboard
-- http://freestyler.ws/style/10982/center-images-with-dynamic-background-firefox-3-1

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: http://freestyler.ws/style/3907/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
2009-01-23 : body:only-child reverted to :first-child, this may fix 'bugs' with (developer?) scripts altering document
2011-06-14 : R.I.P. This style. Long live the http://freestyler.ws/style/42947/firefox-4-center-images-dynamic-background.

Installs:
Applies to:
http://, https://

Related styles:

WARNING: This webware is not functioning properly. Please enable javascript in your browser and try again.