Firefox 4: center images + dynamic background

Added by myf@userstyles, Created: Jun 12, 2011, Updated: Aug 30, 2011
  • With the style applied
  • With the style applied (Generated screenshot)
  • Without the style applied (Generated screenshot)


Background (and additional border) of image changes according mouse position and clicked state. Rebirth of the

More info
1. cold state = native (probably white)
2. cursor over body element ('near image') = dim chequerboard (white/light grey)
3. body being clicked = contrasting chequerboard (white/black)
4. over image = solid light grey
5. image being clicked = solid black

nice local res image: chrome://branding/content/about-logo.png
big press

Update of for Fx4. Fx4 changed the structure of image-only page, so the old one no longer works and Fx4 lacks some possibilities seen in Fx3.

- this time without url-prefix restrictions, lets see what happens

2011-06-13 rebirth
2011-06-15 image-rendering: -moz-crisp-edges just for the image
2011-08-31 image-rendering: -moz-crisp-edges just for the image in 'non-cold' state. That is you'll see downscaled images untouched ('smoothed') as usual until you move your cursor over viewport. After that image gets old nearest-neighbour 'sharp' rendering, so after any kind of artificial zoom (eg. using ) you'll see actual sharp pixels and not the blurry fog. Indeed, only as long as you stay within viewport.

For Chrome try

Applies to:
all URLs

Related styles:

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