FANDOM


This is sort of a personal guide so that I remember the steps I took for next time (it's really annoying wrestling with the software sometimes), but hopefully it may be of help to others as well. This is the process I followed to turn a screenshot (at 720p -- 1080p works better) from the show into a working, aesthetically pleasing background for a wiki.

  1. Choose a screenshot. Keep in mind that with fluid width, not much of the background on either side is visible for a lot of people, so the middle of the picture should preferably have enough to make the picture interesting.
  2. Cut the image into two halves. Personally I find Microsoft Office Picture Manager easy to use for tasks like cropping. I save two copies of the image and crop half off of each one to get a left and right portion.
  3. Choose a background color. Hopefully, either the top or bottom of your image is mostly one solid color (again, towards the middle is the most important part). You can use a browser extension like ColorZilla to sample the color.
  4. Using an image manipulation program (personally I find Inkscape the easiest for this part), add a space 1030px wide and as tall as your image between the two halves. Make it the color you chose previously. (The content area can stretch up to 1600px for large displays, so the software adds a little bit of space when it splits the image; adding this width should line the image up almost exactly with the sides of the content.)
  5. You will probably need to compress the image to fit the 300KB maximum. I like to use GIMP for this because it lets you select the quality of the JPG, so that it isn't fully compressed. I haven't compared different qualities of the same image, though. Saving it as JPG with Paint or another program is probably sufficient.
  6. Upload the image using Special:ThemeDesigner; check "fixed" and leave the other option(s) unchecked. Change the "main" and "middle" background colors to the one you chose earlier. (You could choose something different for "main" if there is a different color that is more prevalent at the sides of the image.)
  7. If you want the image to be anchored to the bottom of the page (i.e. if you sampled the background color from the top of the image), add the following CSS to your wiki's MediaWiki:Common.css:
/* Bottom anchor background image */
body.background-dynamic:after,
body.background-dynamic:before {
    bottom: 0 !important;
    top: inherit !important;
}

And hopefully (after some waiting for the cache and refreshing), you now have a beautiful background for your wiki that will look good for everyone who visits.

Thanks for reading! I can only test backgrounds on my 1280x1024 laptop display, so I'm not certain that this will result in the background looking good on very large displays (or ones that are barely wider than the 1030px minimum content width). Please let me know if you encounter any issues or if the guide is unclear. Also, thanks to Callofduty4 for helping me with the bottom anchoring.

The software works in mysterious ways, so there might even be a better way of doing this kind of thing. I'm not sure. And for other types of images, it would probably be a whole different process.