Help:Background images

Background images are those image files which appear literally in the background of this and every page on this wiki. The bulk of these images is seen outside the page margins, but in reality the image extends underneath the entire page. If you look carefully, you can probably see that the image is dimly visible underneath the page. This unusual behaviour means that images proposed for our background must be prepared in a special way. This tutorial will first explain how the background image works, and then provide an explanation of how these images should be prepared by the user.

How backgrounds work here
Our wiki uses a special bit of CSS coding to ensure a couple of interesting dynamics.

First, as already discussed, there is a distinct difference between the visibility of the image outside the page margin and the way it appears underneath the page. This is achieved by covering the entirety of the page with a translucent white background that sits between the page and the background image. Effectively, we've put a thin "gauze layer" in front of the background image. This improves readability of the foreground text, while also allowing the background image to offer subtle texturing.

Second, The picture remains in the same position, no matter how far down one scrolls on the page. If you'd like to see the difference between our page and that of the typical Wikia wiki, go to starwars:Yoda and scroll down. You'll note that their top-border image of Coruscant disappears when you scroll down the page. Our backgrounds, by contrast, stay put.

What this means is that our page height shrinks from theoretically infinite to something much shorter — something governed by the actual height of your browser window. This eliminates the need to do tiled backgrounds, which are seen on most wikis that have background images, and allows us to create a single, unrepeated background that appears as a strip at the top of the page. It also gives us the flexibility to make something longer, if we choose. In essence, the page fits our design, not the other way around.